我在我的 Flutter 应用程序项目中使用 Provider 状态管理。 实际上,它的 OTP 屏幕分为 Widget:
一旦用户输入电话号码并单击“发送”按钮,我就无法替换我的第二个小部件。 以下是我的 OTP 屏幕,您可以查看:
Expanded(
child: Consumer(
builder: (BuildContext context, value, Widget? child) {
return ResponsiveHelperWidget(
mobile: viewModel.isPhoneNumberEntered
? fillPhoneNumberWidget
: otpVerificationWidget,
desktop: Row(
children: [
const Expanded(child: OTPWebPageFillerWidget()),
Expanded(child: fillPhoneNumberWidget),
],
),
);
},
),
)
在这里,您可以检查这一行:
viewModel.isPhoneNumberEntered
? fillPhoneNumberWidget
: otpVerificationWidget,
这就是我尝试替换我的小部件的方式。
您可以检查我的 ViewModel,如下所示:
class OTPViewModel extends ChangeNotifier {
http.Client client = http.Client();
var isPhoneNumberEntered = false;
OTPViewModel() {
//pending..
}
final TextEditingController phoneC = TextEditingController();
final TextEditingController otpC = TextEditingController();
set setPhoneNumberEntered(bool value) {
isPhoneNumberEntered = value;
notifyListeners();
}
}
在这里您可以检查设置器
setPhoneNumberEntered
我正在更改值并通知侦听器。
在我的第一个小部件中调用此设置器,如下所示:
onPressed: () {
widget.viewModel.setPhoneNumberEntered = true;
},
但问题是我的第二个小部件(输入 OTP 部件)不可见。
我在这里做错了什么?请指导。
要实现这一点,您必须使用 valuenotifier
class OTPViewModel{
…
ValueNotifier<bool> isPhoneNumberEntered = ValueNotifier(false);
…
//你这样压下去
onPressed: () {
viewModel.setPhoneNumberEntered.value = true;
viewModel.setPhoneNumberEntered.notifyListeners();
},
//你的小部件应该像这样,
ValueListenableBuilder(
valueListenable: viewModel.isPhoneNumberEntered,
builder: (context,isPhoneNumberEnteredValue,child){
return ResponsiveHelperWidget(
mobile: isPhoneNumberEnteredValue
? fillPhoneNumberWidget
: otpVerificationWidget,
desktop: Row(
children: [
const Expanded(child: OTPWebPageFillerWidget()),
Expanded(child: fillPhoneNumberWidget),
],
),
);
}
),