Flutter点击其他组件保持TextField焦点及获取当前聚焦TextField的实现问题

问题根因 #

Flutter中默认所有可交互组件（如OutlinedButton、IconButton等）在被点击时会主动请求焦点，因此会覆盖TextField当前持有的焦点状态。

解决方案 #

你可以通过以下两步实现需求：

1. 禁止非输入类组件点击时请求焦点 #

针对不需要抢占输入框焦点的可交互组件，将其点击时自动请求焦点的行为关闭：

• 如果你使用的是Flutter 3.3及以上版本，直接给按钮的style添加requestFocusOnPress: false即可
• 低版本可以给组件绑定自定义FocusNode，设置canRequestFocus = false

2. 获取当前聚焦的输入框 #

可以通过FocusManager.instance.primaryFocus全局获取当前持有的主焦点节点，通过节点的标识、父组件属性即可判断是哪一个TextField处于聚焦状态。

修改后的完整代码示例 #

// 先定义两个FocusNode，可添加debugLabel方便识别
final FocusNode _focusNode = FocusNode(debugLabel: 'firstTextField');
final FocusNode _secondFocusNode = FocusNode(debugLabel: 'secondTextField');

// 组件build代码
Scaffold(
  body: Container(
    width: 250,
    child: Column(children: [
      TextField(
        focusNode: _focusNode,
        autofocus: true,
      ),
      TextField(
        focusNode: _secondFocusNode,
      ),
      OutlinedButton(
        // 核心配置：点击按钮不主动请求焦点
        style: OutlinedButton.styleFrom(requestFocusOnPress: false),
        onPressed: () {
          // 打印第一个输入框的焦点状态
          debugPrint('Has Focus: ${_focusNode.hasFocus}');
          debugPrint('Has Primary Focus: ${_focusNode.hasPrimaryFocus}');
          // 获取当前全局聚焦的节点
          final currentFocus = FocusManager.instance.primaryFocus;
          if (currentFocus != null) {
            debugPrint('当前聚焦的节点：${currentFocus.debugLabel}');
          }
        },
        child: const Text('Click me!'),
      )
    ])
  )
);

其他组件适配 #

如果是Container、Card等本身不可点击的组件，如果你给它们加了点击事件（比如加了GestureDetector、InkWell），同样需要给InkWell/GestureDetector对应的FocusNode设置canRequestFocus = false，或者直接在InkWell的构造参数里设置focusNode: FocusNode(canRequestFocus: false)即可。

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