Flutter Riverpod StateProvider修改属性后未触发UI更新问题

• StateProvider 仅在状态对象的内存引用发生变更时，才会向监听的组件发送更新通知，触发build方法重绘。
• 你当前的写法ref.read(customObjectProvider.notifier).state.name = 'Reuven'只是修改了状态对象内部的属性值，没有改变state本身指向的对象引用，Riverpod无法感知到内部属性的变化，因此UI不会同步更新。

方案1：不可变状态写法（官方推荐，无隐式bug） #

将自定义状态类改为不可变结构，新增copyWith方法用于快速生成新的状态实例，更新时给state赋值全新的对象，触发引用变更：

final customObjectProvider = StateProvider((ref) => MyCustomObject());

class CustomClassProviderScreen extends ConsumerWidget {
  const CustomClassProviderScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final stateObject = ref.watch(customObjectProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Object Provider'),
      ),
      body: Column(
        children: [
          ElevatedButton(
              onPressed: () {
                // 赋值copy生成的新对象，触发引用更新
                ref.read(customObjectProvider.notifier).state =
                    stateObject.copyWith(name: 'Reuven');
              },
              child: const Text('Button 1: Name')),
          ElevatedButton(
              onPressed: () {
                ref.read(customObjectProvider.notifier).state =
                    stateObject.copyWith(id: '338755093');
              },
              child: const Text('Button 2: ID')),
          Text(stateObject.name ?? ''),
          Text(stateObject.id ?? ''),
        ],
      ),
    );
  }
}

// 状态类改为不可变，新增copyWith方法
class MyCustomObject {
  final String? name;
  final String? id;

  MyCustomObject({this.name, this.id});

  MyCustomObject copyWith({
    String? name,
    String? id,
  }) {
    return MyCustomObject(
      name: name ?? this.name,
      id: id ?? this.id,
    );
  }
}

方案2：可变对象快速修复 #

如果不想重构现有状态类，修改内部属性后，手动将state重新赋值为自身，强制触发引用变更通知即可：

ElevatedButton(
  onPressed: () {
    final currentState = ref.read(customObjectProvider);
    currentState.name = 'Reuven';
    // 强制重新赋值触发更新
    ref.read(customObjectProvider.notifier).state = currentState;
  },
  child: const Text('Button 1: Name'),
),
ElevatedButton(
  onPressed: () {
    final currentState = ref.read(customObjectProvider);
    currentState.id = '338755093';
    // 强制重新赋值触发更新
    ref.read(customObjectProvider.notifier).state = currentState;
  },
  child: const Text('Button 2: ID'),
),

注意：方案2的可变状态在异步、多监听场景下容易出现状态不一致问题，生产环境优先使用方案1的不可变写法。

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