Flutter技术问询：TextField失焦时如何隐藏光标并退出编辑模式

这个问题我之前开发Flutter项目时也碰到过，其实核心原因很好理解：关闭软键盘≠TextField失去焦点——默认情况下，点击页面外部收起键盘后，TextField的焦点可能还保留着，所以光标会继续闪烁。下面给你几个实用的解决办法，按需选择就行：

这是最通用的方案，适合整个页面只要点击空白就让所有输入框失焦的场景。用GestureDetector包裹你的页面主体，在onTap回调里调用焦点管理器的失焦方法：

@override
Widget build(BuildContext context) {
  return GestureDetector(
    // 确保点击空白区域能触发回调，避免被子控件拦截
    behavior: HitTestBehavior.opaque,
    onTap: () {
      // 收起键盘并让当前拥有焦点的控件失焦
      FocusManager.instance.primaryFocus?.unfocus();
    },
    child: Scaffold(
      appBar: AppBar(title: const Text("解决光标闪烁问题")),
      body: const Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
          decoration: InputDecoration(hintText: "输入内容试试"),
        ),
      ),
    ),
  );
}

原理说明：FocusManager.instance.primaryFocus会获取当前页面中处于焦点状态的控件，调用unfocus()后，该控件会失去焦点，同时软键盘也会自动收起（如果之前是打开的），TextField也就退出了编辑模式，光标自然会消失。

如果你的页面有多个TextField，或者只想让特定的输入框在点击外部时失焦，可以给目标TextField绑定一个FocusNode，这样能精准控制单个输入框的焦点状态：

class _MyPageState extends State<MyPage> {
  late FocusNode _textFieldFocusNode;

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

  @override
  void dispose() {
    // 页面销毁时记得销毁FocusNode，避免内存泄漏
    _textFieldFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        // 判断输入框是否处于聚焦状态，是的话就失焦
        if (_textFieldFocusNode.hasFocus) {
          _textFieldFocusNode.unfocus();
        }
      },
      child: Scaffold(
        appBar: AppBar(title: const Text("精准控制输入框焦点")),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            // 绑定FocusNode
            focusNode: _textFieldFocusNode,
            decoration: const InputDecoration(hintText: "仅我会在点击外部时失焦"),
          ),
        ),
      ),
    );
  }
}

如果你的页面是复杂嵌套结构，或者需要管理一组控件的焦点，可以用FocusScope来统一管理焦点范围：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("FocusScope管理焦点")),
    body: FocusScope(
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          // 让当前焦点范围内的所有控件失焦
          FocusScope.of(context).unfocus();
        },
        child: const Padding(
          padding: EdgeInsets.all(16.0),
          child: TextField(
            decoration: InputDecoration(hintText: "输入内容"),
          ),
        ),
      ),
    ),
  );
}

小提示：处理滚动控件的情况 #

如果你的页面有ListView、GridView这类可滚动控件，点击它们的空白区域可能不会触发GestureDetector的onTap回调。这时候可以给滚动控件添加onTap回调，同样调用失焦方法，或者将GestureDetector放在滚动控件的父级位置，确保点击能被捕获。

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