You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter点击按钮时如何为指定TextFormField设置输入焦点

Flutter 切换TextFormField输入焦点实现方案

TextEditingController仅负责输入内容管控,无法直接控制焦点,需要配合FocusNode实现焦点切换,具体实现步骤如下:

第一步:定义FocusNode实例

在页面State类中新增对应unitCode输入框的FocusNode声明:

// 原有控制器定义保留
TextEditingController nameCtrl = TextEditingController();
TextEditingController idCtrl = TextEditingController();
TextEditingController nodeCtrl = TextEditingController();
TextEditingController unitCodeCtrl = TextEditingController();
// 新增焦点节点声明
FocusNode unitCodeFocusNode = FocusNode();

第二步:绑定FocusNode到目标TextFormField

找到绑定unitCodeCtrl的TextFormField组件,新增focusNode属性完成绑定:

TextFormField(
  controller: unitCodeCtrl,
  focusNode: unitCodeFocusNode, // 新增本行绑定焦点节点
  // 其余原有配置(如decoration、validator等)保持不变
)

第三步:按钮点击触发焦点切换

修改按钮的onPressed回调代码:

onPressed: () {
  FocusScope.of(context).requestFocus(unitCodeFocusNode);
}

补充注意事项

页面销毁时需要手动销毁FocusNode避免内存泄漏,在State的dispose方法中添加销毁逻辑:

@override
void dispose() {
  // 销毁焦点节点
  unitCodeFocusNode.dispose();
  // 建议同时销毁所有TextEditingController
  nameCtrl.dispose();
  idCtrl.dispose();
  nodeCtrl.dispose();
  unitCodeCtrl.dispose();
  super.dispose();
}

内容的提问来源于stack exchange,提问作者Akash khan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.16 07:06:02