Flutter技术问题：BottomSheet内TextField键盘打开时按返回键无响应

问题核心 #

当BottomSheet中的TextField处于聚焦状态时，系统返回键会被键盘优先拦截，导致BottomSheet内的返回监听逻辑无法触发，键盘关闭后TextField仍保持聚焦状态。

正确实现方式 #

使用WillPopScope拦截BottomSheet的返回事件，结合FocusNode的状态判断，先处理焦点取消，再决定是否关闭BottomSheet：

1. 初始化并管理FocusNode
   在页面的State类中初始化FocusNode，并在组件销毁时释放：

final FocusNode _focusNode = FocusNode();

@override
void dispose() {
  _focusNode.dispose();
  super.dispose();
}

2. 修改BottomSheet的构建逻辑
   用WillPopScope包裹BottomSheet的内容，在onWillPop回调中处理焦点和返回行为：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    return StatefulBuilder(builder: (context, setModalState) {
      return WillPopScope(
        onWillPop: () async {
          if (_focusNode.hasFocus) {
            // 若TextField聚焦，先取消焦点，不关闭BottomSheet
            _focusNode.unfocus();
            return false;
          } else {
            // 无焦点时，正常关闭BottomSheet
            return true;
          }
        },
        child: Container(
          // 适配键盘高度，避免TextField被遮挡
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),
          child: TextField(
            focusNode: _focusNode,
            decoration: InputDecoration(
              hintText: 'Add comments...',
            ),
            textInputAction: TextInputAction.done,
            onEditingComplete: () {
              _focusNode.unfocus();
              // 编辑完成后的额外逻辑
            },
          ),
        ),
      );
    });
  },
);

关键说明 #

• WillPopScope会拦截BottomSheet的返回事件，优先执行自定义逻辑，避免键盘拦截导致的监听失效。
• 判断_focusNode.hasFocus来区分两种场景：聚焦时仅取消焦点，非聚焦时关闭BottomSheet。
• 添加MediaQuery.of(context).viewInsets.bottom作为容器内边距，确保键盘弹出时TextField不被遮挡，提升交互体验。

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