Flutter中解决Stack嵌套PageView与DraggableScrollableSheet遮挡地图交互问题

问题场景 #

开发的地图类应用包含以下交互逻辑：

• 底层为地图视图（示例中用琥珀色ListView模拟）
• 通过PageView实现左右滑动卡片，切换地图上对应的场地
• 卡片上滑可展开DraggableScrollableSheet（示例中内嵌红色ListView模拟活动列表），查看该场地的活动信息

当前核心问题：卡片全屏覆盖地图，导致无法直接对地图进行移动、缩放等交互操作。

解决方案 #

方案1：缩小卡片占据区域（最直观的解决方式） #

让卡片仅占据屏幕下半部分，保留地图上半部分的交互区域。通过Align定位和固定高度限制卡片范围：

PageView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        height: MediaQuery.of(context).size.height * 0.6,
        margin: const EdgeInsets.symmetric(horizontal: 16),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(16),
        ),
        child: Center(child: Text('场地卡片 $index')),
      ),
    );
  },
)

调整后，地图上半部分可直接接收触摸事件，进行移动、缩放操作；卡片仍保留左右滑动切换的功能。

方案2：处理事件穿透（适合需全屏卡片的场景） #

如果需要卡片视觉上全屏，但仅在指定区域响应滑动，可通过GestureDetector和HitTestBehavior.translucent实现事件穿透：

Stack(
  children: [
    // 地图视图（琥珀色ListView）
    ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) => Container(
        height: 100,
        color: Colors.amber[100 * ((index % 9) + 1)],
        child: Center(child: Text('地图行 $index')),
      ),
    ),
    // 带事件穿透的PageView
    GestureDetector(
      behavior: HitTestBehavior.translucent,
      child: PageView.builder(
        itemCount: 3,
        itemBuilder: (context, index) {
          return Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: MediaQuery.of(context).size.height * 0.6,
              margin: const EdgeInsets.symmetric(horizontal: 16),
              color: Colors.blue.withOpacity(0.8),
              child: GestureDetector(
                onPanUpdate: (details) {
                  // 处理卡片左右滑动逻辑
                },
                child: Center(child: Text('场地卡片 $index')),
              ),
            ),
          );
        },
      ),
    ),
    // 活动列表滑动面板
    DraggableScrollableSheet(
      initialChildSize: 0.1,
      minChildSize: 0.1,
      maxChildSize: 0.8,
      builder: (context, scrollController) {
        return Container(
          color: Colors.red[300],
          child: ListView.builder(
            controller: scrollController,
            itemCount: 20,
            itemBuilder: (context, index) => ListTile(title: Text('活动 $index')),
          ),
        );
      },
    ),
  ],
)

该方案中，非卡片覆盖区域的触摸事件会穿透到地图，卡片区域仍保留自身的滑动交互。

方案3：精细控制触摸事件（复杂场景适配） #

通过Listener监听原始触摸事件，根据触摸位置精准判断是否拦截事件：

Listener(
  onPointerDown: (event) {
    RenderBox box = context.findRenderObject() as RenderBox;
    Offset localOffset = box.globalToLocal(event.position);
    // 假设卡片占据屏幕下半60%区域，触摸上半区域则放行事件给地图
    if (localOffset.dy < MediaQuery.of(context).size.height * 0.4) {
      event.handleEvent(event, const HitTestEntry());
    }
  },
  child: Stack(
    children: [/* 地图、PageView、DraggableScrollableSheet 代码 */],
  ),
)

这种方式可针对更复杂的卡片布局，实现自定义的事件拦截逻辑。

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