Flutter Web中叠加在Google地图上的ListView滚动冲突问题求助

Flutter Web 中嵌入的 Google 地图属于平台视图（Platform View），会直接接收浏览器原生手势事件，上层 Flutter 渲染的 ListView 滚动时未拦截原生事件冒泡，就会出现滚动列表时下方地图同步响应滚动的问题。

方案1：使用 pointer_interceptor 组件（推荐，改动最小） #

这是官方维护的专门解决 Flutter Web 平台视图手势透传问题的组件，原理是在上层组件位置渲染一个透明的 DOM 元素，拦截所有手势事件不会透传到下方的平台视图。

1. 安装 pointer_interceptor 依赖
2. 将你的列表组件外层包裹 PointerInterceptor 即可，修改后的列表部分代码如下：

import 'package:pointer_interceptor/pointer_interceptor.dart';

/// 修改后的ListView部分布局
Positioned.fill(
      child: Align(
        alignment: Alignment.bottomRight,
        child: sessions.maybeWhen(
          orElse: () => const SizedBox.shrink(),
          data: (items) {
            return PointerInterceptor( // 新增这一层包裹
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  maxHeight: items.length <= 3
                      ? items.length * 130
                      : mediaQuery.size.width < 720 ? 150 : mediaQuery.size.height * 0.7,
                ),
                child: ScrollablePositionedList.separated(
                  // 你原来的列表配置代码完全不变
                ),
              ),
            );
          },
        ),
      ),
    );

修改后所有落在列表区域的手势都会被拦截，只有列表外的区域手势会触发地图响应，完全符合需求。

方案2：手动维护手势开关（无需新增依赖） #

如果你不想新增依赖，可以通过监听指针位置动态开关地图的滚动手势：

1. 定义状态变量标记指针是否落在列表区域

bool _isPointerOnList = false;

2. 给列表外层加 Listener 监听指针进出事件

Listener(
  onPointerEnter: (_) => _isPointerOnList = true,
  onPointerExit: (_) => _isPointerOnList = false,
  child: // 你原来的ConstrainedBox和列表代码
)

3. 给 MapWidget 配置手势识别器，仅当指针不在列表区域时允许滚动手势

MapWidget(
  onMapCreated: onMapCreated,
  onMarkerSelected: onSessionSelected,
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
    // 仅当指针不在列表区域时允许垂直/水平滚动
    if(!_isPointerOnList) Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer()),
    if(!_isPointerOnList) Factory<HorizontalDragGestureRecognizer>(() => HorizontalDragGestureRecognizer()),
    // 保留其他需要的手势，比如点击、缩放等
    Factory<TapGestureRecognizer>(() => TapGestureRecognizer()),
    Factory<ScaleGestureRecognizer>(() => ScaleGestureRecognizer()),
  },
)

内容的提问来源于stack exchange，提问作者Сергей Алиев