Flutter Provider - 复选框未选中

Question

下面是我的 ViewModel 类：

class SignInViewModel extends ChangeNotifier {
  var isRememberMeChecked = false;
  final TextEditingController emailC = TextEditingController();
  final TextEditingController passwordC = TextEditingController();

  Future<bool> signIn({
    required String email,
    required String password,
  }) async {
    /// Implement Api Call Here
    return true;
  }
}

您可以看到该类正在扩展 ChangeNotifier 并且请不要使用名为 isRememberMeChecked 的变量，该变量默认为“false”。

现在，在我的 Widget 类（即 StateFulWidget）中，我尝试更改 CheckBox 的值，如下所示：

child: Checkbox(
          fillColor: theme.checkboxTheme.fillColor,
          value: widget.viewModel.isRememberMeChecked,
          onChanged: (bool? value) {
            widget.viewModel.isRememberMeChecked=value!;
          },
         ), 

你可以注意到这一行：

widget.viewModel.isRememberMeChecked=value!;

编辑：

我也用set尝试过，如下：

widget.viewModel.setRememberMe = value

在 ViewModel 类中：

set setRememberMe(bool value) {
    isRememberMeChecked = value;
    notifyListeners();
  }

但是这样复选框 UI 也不会被选中为未选中。 意味着复选框 UI 不反映 true 或 false 值。

可能是什么问题？

Answer 1

如果您想刷新页面，您应该使用消费者小部件，或者如果您只想刷新特定区域，您应该使用选择器小部件。

如果您使用Consumer，则当触发viewModel中的任何notifyListener时，所有活动的Consumer小部件都将侦听。如果您想要性能，您可以使用选择器并仅监听选定的变量。

我给你的建议是使用像stacked这样的viewModelBuilder结构。

但是如果你不想这样，你可以这样做；

  Widget build(BuildContext context) {
    return Consumer<SignInViewModel>(
      builder: (context, viewModel, child) =>
          Scaffold(
            appBar: appBar...,
            body: Checkbox(
              fillColor: theme.checkboxTheme.fillColor,
              value: viewModel.isRememberMeChecked,
              onChanged: (bool? value) => viewModel.setRememberMe(value!),
            ),
          ),
    );
  }

如果您只想续订某个区域；

  Widget build(BuildContext context) {
    var signInViewModel = Provider.of<SignInViewModel>(context, listen: false);
    return Selector<SignInViewModel, bool>(
      selector: (_, listener) => listener.isRememberMeChecked,
      builder: (context, isRememberCheck, child) =>  Checkbox(
        fillColor: theme.checkboxTheme.fillColor,
        value: isRememberCheck,
        onChanged: (bool? value) => signInViewModel.setRememberChecked(value!),
      ),
    );
  }

访问像 initState 这样的地方；

var signInViewModel = Provider.of<SignInViewModel>(context, listen: false);