如何解决BottomBar关闭后软键盘无法聚焦到TextField的问题？

当键盘弹出时，可能会导致bottom sheet关闭，进而销毁其中的所有组件。

触发BottomBar中的某个选项时，会执行以下代码在容器中新增列表项：

globals.addinfolistitem[widget.shotlistindex]
        [widget.projectindex]
    .add('Add');
shottypefocusnode.add(FocusNode());
print("FocusNode");

执行后BottomBar会关闭，按需求此时软键盘和光标应聚焦到TextField，但实际软键盘会被隐藏。

BottomBar的实现代码如下：

BottomBar(Widget popupmenu) {
  showModalBottomSheet(
      constraints: BoxConstraints(
        maxHeight: globals.slidingpanelmaxheight.isNaN
            ? 500
            : globals.slidingpanelmaxheight,
        maxWidth: MediaQuery
            .of(context)
            .size
            .width - 10,
      ),
      backgroundColor: Colors.transparent,
      context: context,
      builder: (context) {
        return popupmenu;
      }).then((value) {
    print("popupmenu bottom sheet closed");

    // 尝试设置TextField焦点
    if (!myFocusNode.hasFocus) {
      FocusScope.of(context).requestFocus(myFocusNode);
    }
  });
}

尝试在bottom sheet关闭后重新请求焦点，但未生效。

需求 #

触发BottomBar选项后，成功将选中项添加到容器中，同时让软键盘自动聚焦到对应的TextField。

问题根源 #

1. showModalBottomSheet关闭后，原context可能已脱离当前活跃Widget树，导致FocusScope.of(context)无法正确定位焦点节点。
2. bottom sheet关闭时系统会自动收起键盘，后续的焦点请求被系统行为覆盖，无法唤起键盘。

修复方案 #

1. 延迟到下一帧请求焦点并强制唤起键盘

在bottom sheet关闭的回调中，使用WidgetsBinding.instance.addPostFrameCallback延迟执行焦点请求，确保Widget树更新完成，同时通过SystemChannels强制唤起键盘：

.showModalBottomSheet(
  // 原有配置...
).then((value) {
  print("popupmenu bottom sheet closed");
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (!myFocusNode.hasFocus) {
      FocusScope.of(context).requestFocus(myFocusNode);
      // 强制弹出软键盘
      SystemChannels.textInput.invokeMethod('TextInput.show');
    }
  });
});

2. 确保焦点节点是当前Widget的成员变量

myFocusNode必须是当前页面State类的成员变量，避免因变量销毁导致焦点请求失效：

class YourPageState extends State<YourPage> {
  final FocusNode myFocusNode = FocusNode();

  // 页面其他代码...
}

3. 防止bottom sheet因键盘弹出意外关闭

如果bottom sheet是被键盘顶起导致的意外关闭，可设置isScrollControlled: true并添加底部内边距适配键盘：

showModalBottomSheet(
  isScrollControlled: true,
  constraints: BoxConstraints(
    maxHeight: globals.slidingpanelmaxheight.isNaN
        ? 500
        : globals.slidingpanelmaxheight,
    maxWidth: MediaQuery.of(context).size.width - 10,
  ),
  backgroundColor: Colors.transparent,
  context: context,
  builder: (context) {
    return Padding(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: popupmenu,
    );
  },
)

验证要点 #

确认TextField已绑定目标焦点节点：

TextField(
  focusNode: myFocusNode,
  // 其他配置...
)

测试时检查两个核心点：新增列表项是否成功，软键盘是否自动弹出并聚焦到TextField。

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