StateNotifierProvider 不使用 HookWidget 更新状态

Question

我正在尝试使用Riverpod 状态管理。我有两个TextFormField，我想设置Text 的值，方法是使用StateNotifierProvider 在每个字段中输入值的总和。

在下面的代码中，CashCounterData 是StateNotifier、CashCounter 使用的数据模型。通知器有两个方法，setCount 和setCash，它们在每个TextFormField 的onChanged 方法中调用。

final cashProvider = StateNotifierProvider<CashCounter, CashCounterData>((ref) => CashCounter());

class CashCounter extends StateNotifier<CashCounterData> {
  CashCounter() : super(_initialData);

  static const _initialData = CashCounterData(0, 0);

  void setCount(int value){
    state = CashCounterData(value, state.cash);
  }

  void setCash(value){
    state = CashCounterData(state.count, value);
  }

  int get count => state.count;
  int get cash => state.cash;
}

class CashCounterData {
  final int count;
  final int cash;

  const CashCounterData(this.count, this.cash);
}

接下来，我实现了 UI 并尝试绑定上面定义的 StateNotifierProvider。但是，当我在每个 TextFormField 中输入值时，Text 小部件始终显示 0。

class CalculatableTextFormField extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final cashCounterProvider = useProvider(cashProvider.notifier);
    final TextEditingController _count = TextEditingController();
    final TextEditingController _cash = TextEditingController();
    return Scaffold(
      body: Form(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
                '${cashCounterProvider.count + cashCounterProvider.cash}'
            ),
            TextFormField(
              controller: _count,
              keyboardType: TextInputType.number,
              onChanged: (value)=>cashCounterProvider.setCount(int.parse(value)),
            ),
            TextFormField(
              controller: _cash,
              keyboardType: TextInputType.number,
              onChanged: (value)=>cashCounterProvider.setCash(int.parse(value)),
            )
          ],
        ),
      ),
    );
  }
}

我缺少什么来获得我想要的行为？

Answer 1

您正在查看通知程序，而不是状态。状态是发生变化的，因此会通知侦听器。

如果你只是改变它应该可以工作：

final cashCounterProvider = useProvider(cashProvider.notifier);

到：

final cashCounterProvider = useProvider(cashProvider);

然后，在您的更改处理程序中：

onChanged: (value) => context.read(cashProvider.notifier).setCash(int.tryParse(value) ?? 0),

在这样的处理程序中使用提供程序时，首选context.read，如上所示，而不是avoid unnecessary rebuilds。

如果您将 TextEditingControllers 放入构建方法中，您还需要使用钩子。

final TextEditingController _count = useTextEditingController();
final TextEditingController _cash = useTextEditingController();

总的来说，您的解决方案如下：

class CalculatableTextFormField extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final cashCounterProvider = useProvider(cashProvider);
    final TextEditingController _count = useTextEditingController();
    final TextEditingController _cash = useTextEditingController();
    return Scaffold(
      body: Form(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('${cashCounterProvider.count + cashCounterProvider.cash}'),
            TextFormField(
              controller: _count,
              keyboardType: TextInputType.number,
              onChanged: (value) =>
                  context.read(cashProvider.notifier).setCount(int.tryParse(value) ?? 0),
            ),
            TextFormField(
              controller: _cash,
              keyboardType: TextInputType.number,
              onChanged: (value) =>
                  context.read(cashProvider.notifier).setCash(int.tryParse(value) ?? 0),
            )
          ],
        ),
      ),
    );
  }
}