Flutter如何实现页面点击穿透？使弹窗不遮挡后方控件交互

你当前的问题出在通过Navigator.push打开的路由默认会生成一个模态屏障（Modal Barrier），这个屏障会拦截所有后方页面的点击事件——哪怕你在路由内容中使用了IgnorePointer，屏障本身依然会挡住点击，导致后方按钮无法响应。

要实现点击穿透，有两种可行方案：

方案一：修改PageRoute的模态屏障 #

在PageRouteBuilder中自定义barrierBuilder，让模态屏障也忽略点击，同时保留原有的路由逻辑：

// 修改后的Show Popup按钮点击逻辑
ElevatedButton(
  onPressed: () {
    Navigator.of(context).push(
      PageRouteBuilder(
        opaque: false,
        // 自定义模态屏障，让它忽略点击
        barrierBuilder: (context, dismiss) => IgnorePointer(
          ignoring: true,
          child: ModalBarrier(color: Colors.transparent),
        ),
        pageBuilder: (context, animation, secondaryAnimation) {
          return IgnorePointer(
            child: Scaffold(
              backgroundColor: Colors.transparent,
              body: Container(
                color: Colors.red,
                height: 50,
                width: 50,
              ),
            ),
          );
        },
      ),
    );
  },
  child: const Text('Show Popup'),
),

方案二：使用Overlay替代Navigator路由 #

Overlay的Entry不会自带模态屏障，实现起来更简洁，适合这类无需拦截点击的提示弹窗：

// 修改后的Show Popup按钮点击逻辑
ElevatedButton(
  onPressed: () {
    final overlay = Overlay.of(context);
    final overlayEntry = OverlayEntry(
      builder: (context) => IgnorePointer(
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: Container(
            color: Colors.red,
            height: 50,
            width: 50,
          ),
        ),
      ),
    );
    overlay.insert(overlayEntry);

    // 自动消失逻辑（示例为3秒后移除）
    Future.delayed(const Duration(seconds: 3), () {
      if (mounted) overlayEntry.remove();
    });
  },
  child: const Text('Show Popup'),
),

两种方案都能实现弹窗显示时，后方按钮可正常点击的需求。如果是临时提示类弹窗，更推荐用Overlay方案，逻辑更轻量化。

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