Flutter中按下硬件返回键时释放TextFormField焦点的问题

这个场景我做表单页面时也碰到过，确实会让用户摸不着头脑——明明键盘收起来了，页面上的控件却还是隐藏着。下面给你几个实操性强的解决方案：

方法一：用WillPopScope拦截返回键，主动释放焦点 #

WillPopScope不仅能处理页面退出逻辑，完全可以用来拦截返回键、针对性处理键盘收起的场景。我们可以结合MediaQuery判断键盘是否处于弹出状态，如果是，就先让TextFormField失去焦点，再让键盘正常收起。

示例代码：

class YourPage extends StatelessWidget {
  final FocusNode _textFieldFocus = FocusNode();

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 判断键盘是否弹出（viewInsets.bottom > 0 说明键盘显示）
        if (MediaQuery.of(context).viewInsets.bottom > 0) {
          // 释放焦点
          FocusScope.of(context).requestFocus(FocusNode());
          // 返回false，阻止页面退出，只处理键盘收起
          return false;
        }
        // 键盘没弹出时，正常响应返回键退出页面
        return true;
      },
      child: Scaffold(
        body: Column(
          children: [
            TextFormField(
              focusNode: _textFieldFocus,
              // 你的其他配置
              onTap: () {
                // 获得焦点时隐藏控件的逻辑
              },
            ),
            // 你的其他控件
          ],
        ),
      ),
    );
  }
}

方法二：监听键盘全局显示/隐藏事件，自动释放焦点 #

如果希望更全局地处理键盘关闭时的焦点问题，可以通过WidgetsBindingObserver监听屏幕布局变化，从而判断键盘是否关闭，再自动释放焦点。

步骤如下：

1. 让你的State类混入WidgetsBindingObserver
2. 在initState中注册监听
3. 重写didChangeMetrics方法，判断键盘关闭时机
4. 在dispose中取消监听

示例代码：

class YourPageState extends State<YourPage> with WidgetsBindingObserver {
  final FocusNode _textFieldFocus = FocusNode();
  double _previousBottomInset = 0;

  @override
  void initState() {
    super.initState();
    // 注册监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 取消监听
    WidgetsBinding.instance.removeObserver(this);
    _textFieldFocus.dispose();
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    final currentBottomInset = MediaQuery.of(context).viewInsets.bottom;
    // 当之前的bottomInset大于0（键盘弹出），现在变为0（键盘关闭）时
    if (_previousBottomInset > 0 && currentBottomInset == 0) {
      // 释放焦点
      if (_textFieldFocus.hasFocus) {
        FocusScope.of(context).requestFocus(FocusNode());
      }
    }
    _previousBottomInset = currentBottomInset;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextFormField(
            focusNode: _textFieldFocus,
            // 你的配置
          ),
          // 其他控件
        ],
      ),
    );
  }
}

方法三：自定义TextFormField的焦点监听（辅助方案） #

可以给TextFormField的FocusNode添加焦点变化监听，结合键盘状态做处理，但这个方法通常需要和上面两种配合使用，单独用可能覆盖不到返回键收起键盘的场景：

@override
void initState() {
  super.initState();
  _textFieldFocus.addListener(() {
    if (!_textFieldFocus.hasFocus) {
      // 恢复隐藏的控件的逻辑
    } else {
      // 隐藏控件的逻辑
    }
  });
}

方案选择建议 #

• 如果只需要处理返回键收起键盘的场景，优先用方法一，逻辑更直接，代码量也少；
• 如果需要监听所有键盘关闭的场景（比如用户点击键盘上的收起按钮），方法二更合适，能覆盖所有键盘隐藏的情况；

另外你提到的EventChannel订阅原生事件完全没必要，Flutter本身提供的API已经能很好解决这个问题啦。

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