Flutter中的谷歌地图没有响应触摸事件

Question

我在 Flutter 应用程序中有两个不同的屏幕，它们使用 Google 地图（由 library 提供）。

第一个的小部件结构是

Scaffold -> ListView -> Visibility -> Center -> SizedBox -> GoogleMap

第二个屏幕是

Scaffold -> Container -> Column -> SizedBox -> GoogleMap

在两个屏幕上，我的地图设置相同，但由于某种原因，第一个屏幕上的地图没有响应任何触摸事件。

Answer 1

查看第一个屏幕的小部件结构，我认为问题在于使用的ListView 保持可滚动。 因此，所有的触摸事件都会传播到ListView 而不是地图。

您可以尝试将physics 参数添加到ListView 吗？ 您可以尝试添加

ListView(
  physics: NeverScrollableScrollPhysics(),
  /*Rest of the ListView implementation*/
)

更新：一个工作示例

 return Scaffold(
    body: ListView(
      itemExtent: MediaQuery.of(context).size.height*1.2,
      children: <Widget>[
        Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            buildMap(), /*The map function*/
            Container(
               /*Any other child widget*/
            )
          ],
        ),
        /*Any other child widgets in the List*/
      ],
    )
  );

注意：您需要在水平方向开始滚动才能使地图滚动工作，因为在垂直滚动的情况下它将默认为 ListView。

Answer 2

您需要通过设置gestureRecognizers 属性来告诉GoogleMap 小部件您希望它响应哪些手势，如下所示：

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

...

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(0, 0),
  ),
  gestureRecognizers: Set()
    ..add(Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
);

这并不特定于 GoogleMap 小部件，您需要对任何使用 AndroidView/UIKitView 的小部件执行此操作，以便在将其放置在可滚动视图中时处理手势。

Answer 3

请记住，google_maps_flutter 是 0.2 版的开发人员预览版。更多功能请耐心等待。

Answer 4

我有类似的问题，但在我的情况下，地图位于 sliver 列表中（实际上是 SliverPersistentHeader）。添加平移手势有效，但我仍然无法垂直滚动地图。所以我还添加了VerticalDragGestureRecognizer，它按预期工作。

GoogleMap(
    gestureRecognizers: Set()
      ..add(Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
      ..add(Factory<VerticalDragGestureRecognizer>(
          () => VerticalDragGestureRecognizer())),
    // rest code
),

注意：您还可以添加另一个手势识别器，例如：ScaleGestureRecognizer。

Answer 5

我认为这取决于您的父小部件支持哪种手势。

这种方式对我有用。我的地图在TabBarView > ListView > GoogleMap

 GoogleMap(
      gestureRecognizers: Set()
        ..add(Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
        ..add(Factory<ScaleGestureRecognizer>(() => ScaleGestureRecognizer()))
        ..add(Factory<TapGestureRecognizer>(() => TapGestureRecognizer()))
        ..add(Factory<VerticalDragGestureRecognizer>(
            () => VerticalDragGestureRecognizer())),

Answer 6

我遇到了同样的问题，经过长时间的搜索，我找到了以下解决方案，所以它可以工作：

GoogleMap(
   gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
      new Factory<OneSequenceGestureRecognizer>(() => new EagerGestureRecognizer(),),
   ].toSet(),)

原因是EagerGestureRecognizer 是一个手势识别器，它急切地宣称在所有手势领域都取得了胜利。

参考：

Manage gestures priority between two widgets

propriedade gestureRecognizers

Answer 7

用Gesture Detector包装并添加onVerticalStart

GestureDetector(
    onVerticalDragStart: (start) {},
    child: GoogleMap(
      gestureRecognizers: Set()
        ..add(Factory<OneSequenceGestureRecognizer>(
            () => new EagerGestureRecognizer()))
        ..add(Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
        ..add(
            Factory<ScaleGestureRecognizer>(() => ScaleGestureRecognizer()))
        ..add(Factory<TapGestureRecognizer>(() => TapGestureRecognizer()))
        ..add(Factory<VerticalDragGestureRecognizer>(
            () => VerticalDragGestureRecognizer())),

      onMapCreated: (GoogleMapController c) {
        _controller.complete(c);
      },
      initialCameraPosition: CameraPosition(
        target: LatLng(9.856326, 78.285448),
        zoom: 10.4746,
      ),
      mapType: MapType.normal,
      
    ),
  ),

]1}