迁移至Riverpod后，如何更新TextEditingController的文本内容？

我刚接触Riverpod，正将应用从Provider迁移过来。此前使用Provider时，我会通过如下方式基于Provider模型设置TextField的值：

class MyWidget extends StatefulWidget{
  const MyWidget({ Key? key }) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var controller = TextEditingController();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //Set the value here...
    var model = Provider.of<Model>(context);
    controller.text = model.name;
  }

  Widget build(BuildContext context) {
    return TextField(controller: controller);
  }
}

据我理解，didChangeDependencies()会监听Provider.of<Model>(context)的变化并相应更新控制器。

但尝试用Riverpod实现相同功能时，TextField的值始终无法显示：

class MyWidget extends ConsumerStatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends ConsumerState<MyWidget> {
  var controller = TextEditingController();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //Trying the same thing here...
    final name = ref.watch(providerName);
    controller.text = name;
  }

  Widget build(BuildContext context) {
    final name = ref.watch(providerName);

    return Column(
      children: [
        //This doesn't work:
        TextField(controller: controller),
        //I know my provider has the value, because this works fine:
        Text(name),
      ]
    );
  }
}

我确认Provider存在有效值，因为Text组件能正常显示该值。请问如何让TextEditingController的text属性更新？

问题核心是Riverpod中ref.watch在didChangeDependencies里不会自动监听状态变化并触发回调，和Provider的didChangeDependencies机制不同。以下是两种可行的解决方法：

方法一：在build方法中条件更新控制器 #

既然已经在build方法中通过ref.watch监听状态变化，直接在此处更新控制器即可，同时添加条件判断避免重复设置相同值，减少不必要的性能消耗：

class _MyWidgetState extends ConsumerState<MyWidget> {
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final name = ref.watch(providerName);
    
    // 仅当值不同时更新控制器
    if (controller.text != name) {
      controller.text = name;
    }

    return Column(
      children: [
        TextField(controller: controller),
        Text(name),
      ]
    );
  }
}

方法二：使用ref.listen监听状态变化 #

ref.listen是Riverpod中专门用来监听状态变化并执行副作用（如更新控制器）的API，适合分离UI渲染和逻辑处理的场景：

class _MyWidgetState extends ConsumerState<MyWidget> {
  final controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 监听provider状态变化，收到新值时更新控制器
    ref.listen<String>(providerName, (previousValue, newValue) {
      if (previousValue != newValue) {
        controller.text = newValue;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final name = ref.watch(providerName);

    return Column(
      children: [
        TextField(controller: controller),
        Text(name),
      ]
    );
  }
}

关键说明 #

• ref.watch主要用于build方法中，目的是驱动Widget重建；ref.listen则用于监听状态变化并执行非UI重建的操作。
• 不要在didChangeDependencies中使用ref.watch，该方法仅在Widget依赖关系改变时触发，不会响应Riverpod状态的变化。

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