使用Riverpod StateNotifierProvider时Flutter UI更新失败求助

我正在开发一款简易计算器，采用Riverpod进行状态管理。目前状态可成功更新，但UI并未同步更新，请问我哪里出错了？以下是相关代码：

计算器模型 #

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 Notifier实现 #

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);
  }
}

计算器按钮点击函数（状态已成功更新） #

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);
                }),
              )),
        ),
        
      ]),
    );
  }
}

核心问题 #

Riverpod的StateNotifier通过状态对象的引用变化触发UI更新。你当前代码直接修改了List内部元素（state[0] = ...），但List本身的引用没有改变，Riverpod无法检测到状态变化，因此不会通知UI刷新。另外，用List存储单一计算器状态完全没必要，反而增加了复杂度。

修改步骤 #

1. 调整Provider和StateNotifier的状态类型

将状态从List<CalculatorModel>改为单个CalculatorModel，简化状态管理：

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

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

  void append(String calcInput) {
    final newEquation = state.equation == '0' 
        ? calcInput 
        : state.equation + calcInput;
    // 使用copyWith创建新状态对象，保留原有属性
    state = state.copyWith(equation: newEquation);
  }
}

2. 更新按钮点击函数

移除多余的ref.watch（read已能触发状态更新，watch用于UI监听）：

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

3. 更新UI层的状态监听

直接监听单个CalculatorModel，无需操作List：

@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, _) {
              final calculatorState = ref.watch(calculatorProvider);
              return buildCalculatorScreen(
                  calculatorState.equation,
                  calculatorState.result);
            }),
          ),
        ),
      ),
    ]),
  );
}

为什么这样修改有效 #

• 每次更新状态时，通过copyWith创建新的CalculatorModel实例，状态引用发生变化，Riverpod会检测到变化并通知UI组件刷新。
• 去掉不必要的List，简化了状态逻辑，避免了可变集合带来的状态检测盲区。

内容的提问来源于stack exchange，提问作者Eternex Systems