插入OverlayEntry时如何阻止底层Widget的用户交互？

针对你遇到的OverlayEntry显示后，底层TextField仍能通过TAB键聚焦输入的问题，有两种可靠的解决方式：

方法一：使用ModalBarrier实现模态屏障 #

ModalBarrier是Flutter内置组件，专门用于创建模态屏障，可直接阻止底层Widget接收指针事件和焦点遍历，同时允许Overlay内的控件正常交互。

修改你的_newOverlayEntry方法：

OverlayEntry _newOverlayEntry() {
  final focusNode = FocusNode();
  return OverlayEntry(
    builder: (context) {
      final Size mediaSize = MediaQuery.of(context).size;
      // 延迟请求焦点，确保Overlay渲染完成后将焦点转移到内部按钮
      WidgetsBinding.instance.addPostFrameCallback((_) {
        FocusScope.of(context).requestFocus(focusNode);
      });
      return Stack(
        fit: StackFit.expand,
        children: [
          // 模态屏障：阻止底层交互，设置背景色
          ModalBarrier(
            color: Theme.of(context).disabledColor,
            dismissible: false, // 点击屏障不会自动关闭Overlay
          ),
          // 你的Overlay内容
          Align(
            alignment: Alignment.centerRight,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.green,
              child: TextButton(
                focusNode: focusNode,
                onPressed: () {
                  focusNode.unfocus();
                  overlayEntry?.remove();
                  overlayEntry?.dispose();
                  overlayEntry = null;
                },
                child: const Text("Close"),
              ),
            ),
          ),
        ],
      );
    },
  );
}

效果说明： #

• 点击、滑动等指针事件会被ModalBarrier吸收，无法传递到底层
• TAB键只会在Overlay内的控件（此处仅关闭按钮）间切换焦点，不会落到底层TextField
• 无需修改原有页面的Widget结构，仅在Overlay内部处理

方法二：直接禁用底层Widget的交互 #

通过状态变量控制底层Widget的交互权限，使用AbsorbPointer包裹底层内容，在Overlay显示时禁用所有底层交互。

1. 在_MyHomePageState中添加状态变量：

bool _isOverlayVisible = false;

2. 修改build方法中的body部分：

body: AbsorbPointer(
  // 当Overlay显示时，禁用底层所有交互
  absorbing: _isOverlayVisible,
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const TextField(
          decoration: InputDecoration(
            labelText: "Input",
          ),
        ),
        TextButton(
          onPressed: () {
            setState(() {
              _isOverlayVisible = true;
            });
            overlayEntry = _newOverlayEntry();
            Overlay.of(context).insert(overlayEntry!);
          },
          child: const Text("Open Overlay"),
        ),
      ],
    ),
  ),
),

3. 修改Overlay内关闭按钮的点击事件：

onPressed: () {
  setState(() {
    _isOverlayVisible = false;
  });
  overlayEntry?.remove();
  overlayEntry?.dispose();
  overlayEntry = null;
},

效果说明： #

• Overlay显示时，底层所有Widget完全无法接收任何用户交互（包括点击、焦点切换）
• 实现逻辑直观，适合需要彻底隔离底层交互的场景

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