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;