如何将Flutter TextField值与ChangeNotifier实现双向绑定

直接给TextEditingController.text赋值时，默认会将文本选区重置为文本起始位置；同时控制器监听器和ChangeNotifier监听器无判断互相同步，会触发循环更新，直接导致光标每次输入后跳回输入框最前端。

核心逻辑是加同步标记避免循环更新，给控制器赋值时主动保留合法的光标位置，不要无脑双向触发监听。

1. 完整双向绑定实现（支持模型主动更新、外部赋值场景） #

适用于存在表单重置、接口返回预填值、跨组件修改文本内容的场景。
首先定义状态模型：

class FormState extends ChangeNotifier {
  String _inputText = '';
  String get inputText => _inputText;

  set inputText(String val) {
    // 值无变化时不触发更新，阻断无效循环
    if (_inputText == val) return;
    _inputText = val;
    notifyListeners();
  }
}

组件内绑定逻辑：

class BoundTextField extends StatefulWidget {
  const BoundTextField({super.key});

  @override
  State<BoundTextField> createState() => _BoundTextFieldState();
}

class _BoundTextFieldState extends State<BoundTextField> {
  late final TextEditingController _textController;
  late final FormState _formState;
  // 标记当前同步方向，避免循环触发
  bool _isSyncFromState = false;

  @override
  void initState() {
    super.initState();
    // 替换为你实际获取ChangeNotifier的方式
    _formState = context.read<FormState>();
    // 初始化时用模型值填充控制器
    _textController = TextEditingController(text: _formState.inputText);

    // 控制器变化时同步到状态模型
    _textController.addListener(() {
      if (_isSyncFromState) return;
      _formState.inputText = _textController.text;
    });

    // 模型变化时同步到控制器
    _formState.addListener(_syncTextFromState);
  }

  void _syncTextFromState() {
    final stateVal = _formState.inputText;
    // 文本一致时不更新，避免光标异常
    if (_textController.text == stateVal) return;

    _isSyncFromState = true;
    // 记录更新前的光标位置
    final originalSelection = _textController.selection;
    // 更新控制器文本
    _textController.text = stateVal;
    // 计算合法光标偏移，避免超过文本长度报错
    final validCursorOffset = originalSelection.baseOffset.clamp(0, stateVal.length);
    // 恢复光标位置
    _textController.selection = TextSelection.collapsed(offset: validCursorOffset);

    // 同步完成后重置标记
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _isSyncFromState = false;
    });
  }

  @override
  void dispose() {
    _formState.removeListener(_syncTextFromState);
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _textController,
      // 其余TextField配置按需添加
    );
  }
}

2. 简化实现（仅用户输入修改值场景） #

如果不存在模型主动修改文本的需求（比如没有表单重置、外部预填逻辑），不需要监听模型反向同步，直接初始化控制器后用onChanged同步状态即可，完全不会出现光标问题：

@override
void initState() {
  super.initState();
  _formState = context.read<FormState>();
  _textController = TextEditingController(text: _formState.inputText);
}

// build方法内
TextField(
  controller: _textController,
  onChanged: (val) => _formState.inputText = val,
)

注意：不要在build方法里直接给_textController.text赋值，否则每次组件重建都会重置光标位置。

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