Flutter中点击Dialog下方页面？CompositedTransformFollower拦截点击问题

问题根源在于两点：一是Navigator默认的PageRoute为不透明状态，会拦截全屏幕的点击事件；二是你当前的GestureDetector容器铺满了整个屏幕，进一步阻断了下方页面的交互。以下是具体修复方案：

1. 改为透明PageRoute #

将默认的PageRouteBuilder设置为透明路由，通过opaque: false让路由不再遮挡下方页面的点击：

Navigator.of(context, rootNavigator: false)
    .push(PageRouteBuilder(
  opaque: false, // 核心设置：让路由透明，允许点击穿透
  pageBuilder: (context, animation, secondaryAnimation) => content,
))
.then((value) {
  // 关闭后的逻辑
});

2. 调整遮罩区域的点击响应 #

原来的黑色背景容器无尺寸约束，会铺满屏幕导致任何点击都触发关闭。修改为透明遮罩，仅在点击非弹窗区域时响应关闭：

GestureDetector(
  onTap: () {
    Navigator.pop(context); // 直接关闭当前路由
  },
  behavior: HitTestBehavior.translucent, // 允许透明区域的点击穿透到下层
  child: const ColoredBox(color: Colors.transparent),
),

同时给Stack添加fit: StackFit.expand，让遮罩层铺满屏幕，白色弹窗容器放在Stack上层，这样只有点击弹窗以外的区域才会触发关闭，弹窗内部和下方页面的点击都能正常响应。

完整修改后的代码 #

final content = CompositedTransformFollower(
  link: _link,
  showWhenUnlinked: false,
  offset: Offset(0, widget.height),
  child: Stack(
    fit: StackFit.expand, // 让Stack铺满屏幕
    children: [
      GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        behavior: HitTestBehavior.translucent,
        child: const ColoredBox(color: Colors.transparent),
      ),
      Container(
        clipBehavior: Clip.antiAlias,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(8)),
        ),
        constraints: BoxConstraints(
          maxHeight: contentHeight * entity.scale,
        ),
        child: entity.child,
      )
    ],
  ),
);

Navigator.of(context, rootNavigator: false)
    .push(PageRouteBuilder(
  opaque: false,
  pageBuilder: (context, animation, secondaryAnimation) => content,
))
.then((value) {
  // 关闭后的逻辑
});

原理说明 #

• opaque: false解除了路由对全局点击事件的拦截，下方页面可以正常接收交互。
• HitTestBehavior.translucent确保GestureDetector只响应自身区域的点击，同时不阻断下层元素的事件传递。
• Stack铺满屏幕后，透明遮罩层覆盖弹窗以外的区域，既实现了点击空白关闭的需求，又不影响弹窗内部和下方页面的正常交互。

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