如何无需按下提交按钮即可提交TextField的输入值

不需要依赖onSubmitted参数，通过「TextEditingController + 焦点监听」的组合就能实现需求，点击输入框外部区域失焦时也能正常拿到输入内容触发逻辑。

具体实现步骤 #

• 为目标TextField创建独立的TextEditingController，用于随时读取输入框的最新文本值
• 为TextField绑定自定义FocusNode，给焦点节点添加状态监听，当检测到输入框失去焦点时，直接从controller中读取当前值执行业务逻辑
• 页面销毁时记得释放controller和focusNode资源，避免内存泄漏

代码示例 #

// State类中声明变量
late TextEditingController _inputController;
late FocusNode _inputFocusNode;

@override
void initState() {
  super.initState();
  _inputController = TextEditingController();
  _inputFocusNode = FocusNode();

  // 绑定焦点变化监听
  _inputFocusNode.addListener(() {
    // 焦点丢失时触发处理
    if (!_inputFocusNode.hasFocus) {
      final currentInputText = _inputController.text;
      // 在此处编写输入内容的处理逻辑即可
      debugPrint('失焦时获取输入值：$currentInputText');
    }
  });
}

@override
void dispose() {
  // 释放资源
  _inputController.dispose();
  _inputFocusNode.dispose();
  super.dispose();
}

// 对应TextField组件写法
TextField(
  controller: _inputController,
  focusNode: _inputFocusNode,
  // 可按需保留onSubmitted，两者逻辑不会冲突
)

方案优势 #

• 覆盖所有失焦场景：不管是点击键盘提交、点击输入框外区域、切换其他输入框导致的失焦，都能正常触发逻辑
• 不需要在onChanged回调中手动维护拼接字符串，controller会自动同步最新的输入内容
• 不会像onChanged那样每次输入字符都触发业务逻辑，仅在失焦时执行一次，性能和交互体验更优

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