Flutter TextField：点击外部如何让其失去焦点？

当页面只有单个TextField时，默认点击空白区域不会让它失焦，以下是几种实用的解决方法：

方法一：全局点击空白区域失焦（最简单） #

用GestureDetector包裹页面的根组件，点击时主动让当前焦点组件失焦：

@override
Widget build(BuildContext context) {
  return GestureDetector(
    // 点击空白区域时触发
    onTap: () {
      // 关闭键盘并移除当前焦点
      FocusManager.instance.primaryFocus?.unfocus();
    },
    child: Scaffold(
      appBar: AppBar(title: const Text('TextField示例')),
      body: const Center(
        child: TextField(
          decoration: InputDecoration(hintText: '点击输入，点击空白区域失焦'),
        ),
      ),
    ),
  );
}

这种方式会让所有拥有焦点的组件都失去焦点，同时自动收起键盘，适合大多数场景。

方法二：使用FocusScope控制焦点 #

和方法一逻辑类似，只是调用FocusScope的方法：

GestureDetector(
  onTap: () {
    FocusScope.of(context).unfocus();
  },
  child: Scaffold(/* 页面内容 */),
)

FocusScope.of(context).unfocus()会清除当前焦点范围内的所有焦点，效果和方法一一致，根据个人习惯选择即可。

方法三：精准控制单个TextField（用FocusNode） #

如果需要单独控制某个TextField的焦点状态，可以使用FocusNode：

1. 定义并管理FocusNode：

final FocusNode _textFieldFocus = FocusNode();

@override
void dispose() {
  // 组件销毁时释放FocusNode，避免内存泄漏
  _textFieldFocus.dispose();
  super.dispose();
}

2. 绑定到TextField并处理点击事件：

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      // 仅当该TextField有焦点时，才让它失焦
      if (_textFieldFocus.hasFocus) {
        _textFieldFocus.unfocus();
      }
    },
    child: Scaffold(
      appBar: AppBar(title: const Text('精准控制焦点')),
      body: Center(
        child: TextField(
          focusNode: _textFieldFocus,
          decoration: InputDecoration(hintText: '仅我会在点击空白时失焦'),
        ),
      ),
    ),
  );
}

这种方式适合需要对特定输入框做单独处理的场景，比如页面有多个TextField，但只需要其中一个点击空白失焦。

注意事项 #

• 如果页面中有按钮、列表项等可点击组件，它们的点击事件优先级默认高于GestureDetector，不会被拦截，无需额外处理。
• 使用FocusNode时一定要在dispose方法中销毁，避免内存泄漏。

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