Flutter中TextField设置初始值后输入内容无法同步更新问题

问题根因 #

你的问题核心是每次UI重绘时都会重新创建TextEditingController实例：

• 你直接在CustomTextField的controller参数位置初始化TextEditingController()..text = datumAdministrative.name，相当于每次build执行到这个控件时，都会生成一个全新的控制器，默认值永远是初始的datumAdministrative.name
• 你调用validationForm.changeName后执行了notifyListeners，会触发父级Widget重绘，重绘时新的控制器会覆盖旧的，所以你刚输入的内容就被重置回初始值了
• 你注释掉校验函数后不会触发notifyListeners，UI不会重绘，控制器没有被替换，所以看起来输入正常，这只是临时表象，只要触发其他重绘逻辑还是会出现同样问题

修复方案 #

1. 在State类中持久化持有TextEditingController实例，不要在build方法内创建
2. 在initState生命周期中初始化控制器、设置初始值，在dispose中销毁控制器避免内存泄漏
3. 如果需要在输入不符合规则时重置内容，可在校验逻辑中同步修改控制器的text值

代码示例 #

第一步：State中声明和初始化控制器

class YourPageState extends State<YourPage> {
  late TextEditingController _nameController;
  final validationForm = YourValidationForm(); // 你的validationForm实例

  @override
  void initState() {
    super.initState();
    // 初始化时设置初始值
    _nameController = TextEditingController(text: datumAdministrative.name);
  }

  @override
  void dispose() {
    // 页面销毁时销毁控制器
    _nameController.dispose();
    super.dispose();
  }

第二步：修改TextField配置

CustomTextField(
  controller: _nameController, // 复用同一个控制器实例
  placeholder: Constants.selectDate,
  helperText: Constants.requiredData,
  keyboardType: TextInputType.text,
  enable: true,
  errorText: validationForm.name.error,
  textInputAction: TextInputAction.next,
  textCapitalization: TextCapitalization.sentences,
  onChanged: (String value) {
    validationForm.changeName(value);
  },
);

可选：如果需要在校验不通过时重置输入内容，修改changeName逻辑

void changeName(String value, TextEditingController controller) {
  String pattern = r'(^[a-zA-Z ]*$)';
  RegExp regExp = RegExp(pattern);
  if (regExp.hasMatch(value)) {
    _name = ValidationItem(value, null);
  } else {
    _name = ValidationItem(null, Constants.nameAdministrativeMessage);
    // 校验不通过时直接回退到上一次合法值，或者清空
    controller.text = _name.value ?? '';
    // 移动光标到末尾
    controller.selection = TextSelection.fromPosition(TextPosition(offset: controller.text.length));
  }
  notifyListeners();
}

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