Flutter：如何使用TextField的focusNode属性实现点击控制

我来给你详细拆解一下Flutter里怎么用FocusNode控制TextField的焦点，官方文档可能没讲得这么细，但实际用起来很直观：

1. 先创建FocusNode实例 #

首先你需要在State类里定义一个FocusNode对象，一定要记得在组件销毁时释放它，不然会造成内存泄漏：

class _MyPageState extends State<MyPage> {
  // 用late延迟初始化
  late FocusNode _myTextFieldFocus;

  @override
  void initState() {
    super.initState();
    // 初始化FocusNode
    _myTextFieldFocus = FocusNode();
  }

  @override
  void dispose() {
    // 释放资源，这步很关键！
    _myTextFieldFocus.dispose();
    super.dispose();
  }

  // ...其他业务代码
}

2. 把FocusNode绑定到TextField #

接下来只需要把创建好的FocusNode赋值给TextField的focusNode属性，这样两者就关联起来了：

TextField(
  focusNode: _myTextFieldFocus,
  decoration: InputDecoration(
    hintText: "试试手动控制我的焦点~",
  ),
)

3. 手动控制焦点的获取与失去 #

现在你就可以在任意地方主动控制这个TextField的焦点状态了：

• 让TextField获取焦点（自动弹出键盘）：

ElevatedButton(
  onPressed: () {
    // 通过FocusScope请求焦点
    FocusScope.of(context).requestFocus(_myTextFieldFocus);
  },
  child: Text("点击让输入框获取焦点"),
)

• 让TextField失去焦点（收起键盘）：

ElevatedButton(
  onPressed: () {
    // 直接调用unfocus方法
    _myTextFieldFocus.unfocus();
    // 如果你想让页面上所有焦点都失去，也可以用：FocusScope.of(context).unfocus();
  },
  child: Text("点击让输入框失去焦点"),
)

4. 监听焦点状态变化（可选） #

如果需要在TextField获得/失去焦点时做一些操作（比如验证输入、改变UI样式），可以给FocusNode添加监听：

@override
void initState() {
  super.initState();
  _myTextFieldFocus = FocusNode();
  
  // 添加焦点状态监听
  _myTextFieldFocus.addListener(() {
    if (_myTextFieldFocus.hasFocus) {
      print("输入框现在获得焦点啦！");
      // 比如：显示输入提示、改变输入框边框颜色
    } else {
      print("输入框失去焦点了...");
      // 比如：验证输入内容是否合法
    }
  });
}

额外小技巧：多输入框切换焦点 #

如果页面上有多个TextField，还可以用FocusScope来快速切换焦点：

// 切换到下一个输入框的焦点
FocusScope.of(context).nextFocus();
// 切换到上一个输入框的焦点
FocusScope.of(context).previousFocus();

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