使用 Provider 替换 Flutter 中的 Widget

问题描述 投票:0回答:1

我在我的 Flutter 应用程序项目中使用 Provider 状态管理。 实际上,它的 OTP 屏幕分为 Widget:

  1. 输入电话号码小部件,
  2. 输入 OTP 小部件。

一旦用户输入电话号码并单击“发送”按钮,我就无法替换我的第二个小部件。 以下是我的 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 部件)不可见。

我在这里做错了什么?请指导。

flutter provider consumer
1个回答
1
投票

要实现这一点,您必须使用 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),
          ],
        ),
      );

    }
),
© www.soinside.com 2019 - 2024. All rights reserved.