Flutter UI 更新失败，Riverpod StateNotifierProvider

Question

我正在构建一个简单的计算器并使用 Riverpod 进行 state 管理。 虽然我可以更新 state，但 UI 没有随着更改而更新……有人能告诉我我做错了什么吗？ 这是代码：

计算器 Model

class CalculatorModel {
  final bool shouldAppend;
  final String equation;
  final String result;

  const CalculatorModel(
      {this.shouldAppend = true, this.equation = '0', this.result = '0'});

  CalculatorModel copyWith({
    bool? shouldAppend,
    String? equation,
    String? result,
  }) =>
      CalculatorModel(
          shouldAppend: shouldAppend ?? this.shouldAppend,
          equation: equation ?? this.equation,
          result: result ?? this.result);
}

计算器 State 通知器实现

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:components/calculator_components/calculator_model.dart';
import 'package:math_expressions/math_expressions.dart';

final calculatorProvider =
    StateNotifierProvider<CalculatorStateNotifier, List<CalculatorModel>>(
        (ref) => CalculatorStateNotifier());

class CalculatorStateNotifier extends StateNotifier<List<CalculatorModel>> {
  CalculatorStateNotifier() : super([const CalculatorModel()]);

  void append(String calcInput) {
    final equation = () {
      return state[0].equation == '0'
          ? calcInput
          : state[0].equation + calcInput;
    }();

    state[0] = CalculatorModel(equation: equation);
  }
}

单击 function 获取计算器按钮。 State 正在更新中，成功...

void onClickedButton(String calcInput, WidgetRef ref) {
  ref.read(calculatorProvider.notifier).append(calcInput);
  ref.watch(calculatorProvider);
  print(ref.watch(calculatorProvider)[0].equation);
}

Riverpod 在表示层中调用时不更新 UI...

@override
  Widget build(BuildContext context, WidgetRef ref) {
    Size size = MediaQuery.of(context).size;

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      margin: const EdgeInsets.symmetric(vertical: 10),
      width: size.width * 0.8,
            child: Column(children: [
        Expanded(
          child: Container(
              child: Padding(
                padding: const EdgeInsets.only(top: 15.0, right: 22),
                child: Consumer(builder: (context, ref, _) {
                  return buildCalculatorScreen(
                      ref.watch(calculatorProvider)[0].equation,
                      ref.watch(calculatorProvider)[0].result);
                }),
              )),
        ),
        
      ]),
    );
  }
}

Answer 1

首先，您不应该在异步调用中使用ref.watch ，包括按钮调用。 其次，由于我们的 state 是不可变的，我们不允许做state[0] = 。 您需要以其他方式更新您的列表，例如使用扩展运算符或List.of()

更多信息：来自 Riverpod 的 StateNotifierProvider

Answer 2

state应该是不可变的，您必须将新的对象/数组设置为新的 state。 你可以这样做：

final newState = List.from(state);
newState[0] = CalculatorModel(equation: equation);
state = newState;