Flutter中TextFormField的onChanged调用setState异常问题排查

核心错误点 #

1. GlobalKey定义位置错误：你把_formKey放在了build方法内部，每次调用setState触发UI重绘时，都会创建一个新的GlobalKey<FormState>实例，导致Form组件的状态被重置，输入框因此失去焦点，输入内容也会被清空。
2. TextFormField未绑定状态值：你的输入框没有关联状态变量_tag，既没有设置initialValue，也没有使用TextEditingController，所以即使_tag被更新，输入框也不会同步显示内容。

修正后的代码示例 #

class _PageState extends State<AddPage> {
  String _tag = '';
  final _formKey = GlobalKey<FormState>(); // 移到State成员变量

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 其他代码
      body: Form(
        key: _formKey, // 绑定全局key
        child: TextFormField(
          decoration: const InputDecoration(labelText: "Tag *"),
          initialValue: _tag, // 绑定状态变量作为初始值
          onChanged: (val) {
            setState(() {
              _tag = val;
            });
          },
        ),
      ),
    );
  }
}

更推荐的方案：使用TextEditingController #

如果需要更灵活地控制输入框内容（比如主动清空、监听输入等），推荐使用TextEditingController：

class _PageState extends State<AddPage> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _tagController = TextEditingController();

  @override
  void dispose() {
    _tagController.dispose(); // 销毁controller，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 其他代码
      body: Form(
        key: _formKey,
        child: TextFormField(
          decoration: const InputDecoration(labelText: "Tag *"),
          controller: _tagController, // 绑定controller
          onChanged: (val) {
            // 直接通过_controller.text获取输入值，无需额外状态变量
            print(_tagController.text);
          },
        ),
      ),
    );
  }
}

关键说明 #

• 全局Key必须作为State类的成员变量，确保在组件生命周期内唯一，避免状态重置。
• 绑定状态变量时，initialValue适合简单场景；TextEditingController适合复杂输入控制场景，且无需依赖setState同步输入框内容（除非需要触发其他UI更新）。

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