使用 Provider 替换 Flutter 中的 Widget

Question

我在我的 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 部件）不可见。

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

Answer 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),
          ],
        ),
      );

    }
),