1

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

在下面的代码中，CashCounterData是要使用的数据模型StateNotifier, CashCounter。通知程序有两个方法，setCount在eachsetCash的方法中调用。onChangedTextFormField

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上面定义的内容。但是，当我在 each 中输入值时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)),
            )
          ],
        ),
      ),
    );
  }
}

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

4

1 回答 1

1

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

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

final cashCounterProvider = useProvider(cashProvider.notifier);

到：

final cashCounterProvider = useProvider(cashProvider);

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

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

当在这样的处理程序中使用提供程序时，最好context.read如上所示以避免不必要的重建。

如果您将 TextEditingControllers 放在 build 方法中，您还需要使用钩子。

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),
            )
          ],
        ),
      ),
    );
  }
}
于 2021-07-28T21:19:56.477 回答