GoogleMap置于SingleChildScrollView的Column中手势缩放平移失效求助

问题原因 #

当SingleChildScrollView包裹Column时，它的垂直手势识别器会优先捕获屏幕上的滑动手势，导致GoogleMap无法接收平移、缩放等操作所需的手势事件。

解决方案 #

通过配置GoogleMap的gestureRecognizers参数，指定一个优先级更高的手势识别器，让地图优先处理自身区域内的手势：

SingleChildScrollView(
  child: Column(
    children: [
      // 其他子组件
      SizedBox(
        width: 300,
        height: 300,
        child: GoogleMap(
          initialCameraPosition: const CameraPosition(
            target: LatLng(37.7749, -122.4194), // 示例坐标
            zoom: 12,
          ),
          // 核心配置：让地图优先捕获手势
          gestureRecognizers: {
            Factory<OneSequenceGestureRecognizer>(
              () => EagerGestureRecognizer(),
            ),
          },
          // 其他地图相关配置（如markers、onMapCreated等）
        ),
      ),
      // 其他子组件
    ],
  ),
)

原理说明 #

EagerGestureRecognizer会在手势开始时立即抢占事件所有权，阻止SingleChildScrollView的手势识别器捕获地图区域内的手势，从而让GoogleMap正常响应平移、缩放等操作。该方案不会影响地图区域外的滚动能力——只有触摸地图时手势会被优先处理，离开地图区域后滚动功能恢复正常。

备选方案 #

如果上述方案存在兼容性问题，也可以通过GestureDetector包裹地图，手动控制SingleChildScrollView的滚动状态：

final scrollController = ScrollController();

// 构建组件部分
SingleChildScrollView(
  controller: scrollController,
  child: Column(
    children: [
      // 其他子组件
      GestureDetector(
        behavior: HitTestBehavior.opaque,
        onPanDown: (_) {
          // 触摸地图时禁用滚动
          scrollController.position.physics = const NeverScrollableScrollPhysics();
        },
        onPanEnd: (_) {
          // 手势结束后恢复滚动
          scrollController.position.physics = const AlwaysScrollableScrollPhysics();
        },
        child: SizedBox(
          width: 300,
          height: 300,
          child: GoogleMap(
            initialCameraPosition: const CameraPosition(
              target: LatLng(37.7749, -122.4194),
              zoom: 12,
            ),
          ),
        ),
      ),
      // 其他子组件
    ],
  ),
)

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