Riverpod状态更新后UI没刷新，是不是监听方式有问题？

技术英旭提问于 2026-03-10 19:54:19 阅读 7

移动

我在用Riverpod做Flutter开发，修改了Provider里的数据，但界面上的Text没变化。明明调用了ref.read(myProvider.notifier).update()，也确认数据确实变了，可就是不重建Widget，这到底是哪出问题了？

之前在Vue里类似逻辑是这样写的：

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
setTimeout(() => count.value = 5, 1000)
</script>

我来解答赞 4 收藏

反馈

1 条解答

上官文茹 Lv1

你的问题基本确定是这里用错了：build方法里用了ref.read而不是ref.watch。

Riverpod和Vue的响应式机制不一样。Vue的ref是响应式的，但你用ref.read去拿Provider的值，它只读一次，不会建立监听关系，状态变了UI自然不会更新。

改一下：

// 错误写法 - 不会触发重建

class MyWidget extends ConsumerWidget {

  @override

  Widget build(BuildContext context, WidgetRef ref) {

    final count = ref.read(myProvider); // 这里用read了

    return Text('$count');

  }

}



// 正确写法

class MyWidget extends ConsumerWidget {

  @override

  Widget build(BuildContext context, WidgetRef ref) {

    final count = ref.watch(myProvider); // 用watch才会监听变化

    return Text('$count');

  }

}

另一个可能：如果你用的是StateNotifier，确保更新状态是通过state属性：

class MyNotifier extends StateNotifier<int> {

  MyNotifier() : super(0);

  

  void update(int newValue) {

    state = newValue; // 必须这样赋值，不能直接改某个变量

  }

}

你检查一下是不是build方法里用了read？

2026-03-10 20:07