为什么useTextEditingController的value更新无法被useEffect监听？

• useTextEditingController返回的控制器实例在组件生命周期内是稳定的，不会随输入内容变化重新创建
• 控制器的value更新时默认不会触发HookWidget重构建，build方法不会重复执行，useEffect的依赖数组不会触发重新比对，因此回调仅在初始化时执行一次

在useEffect中主动给控制器添加文本变化监听器，同时返回清理函数避免内存泄漏，修改后的核心代码如下：

class RecordForm extends HookWidget {
  final Record? record;
  const RecordForm({
    Key? key,
    this.record,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final initialTitle = record != null ? record!.title : "";
    final _title = useTextEditingController.fromValue(
      TextEditingValue(text: initialTitle)
    );

    useEffect((){
      // 定义文本变化回调
      void onTextChanged() {
        log.wtf(_title.value.text);
      }
      // 给控制器添加监听
      _title.addListener(onTextChanged);
      // 组件销毁时移除监听，避免内存泄漏
      return () => _title.removeListener(onTextChanged);
    }, [_title]); // 依赖项填入稳定的控制器实例即可

    return // ...
      TextFormField(
        controller: _title,
        // ...
      ),
    // ...
    ;
  }
}

修改后只要TextFormField的输入内容发生变化，就会触发控制器的监听回调，打印最新的文本值。

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