同一屏幕上的 Google 地图和列表视图答案

【问题标题】：GoogleMap and ListView on the same sreen同一屏幕上的 Google 地图和列表视图
【发布时间】：2020-02-04 09:29:57
【问题描述】：

我想让屏幕像顶部显示谷歌地图和一个过滤表单，然后最后显示垂直列表视图。我有很多尝试，但地图不是垂直滚动，它采取 listview 的滚动。

以及如何在地图中添加缩放加和缩放减按钮

我的小部件树就像 ..mapView 是 GoogleMap 小部件。

 return ListView(
         children: <Widget>[
           SizedBox(height: mapHeight, child: MapView()),
            ListView(
             physics: const NeverScrollableScrollPhysics(),
             shrinkWrap: true,
             children: <Widget>[
               getForm(context),
               getWorkerList(context)
             ],
           ) ,
         ],
       );

类似下面的另一个尝试，但没有得到正确的输出

 return ListView(
  children: <Widget>[
    SizedBox(
      height: 300,
      child: ListView(
        //i want to disable listview scrolling when scroll on map
        physics: NeverScrollableScrollPhysics(),
        children: <Widget>[
          Container(
            height: 300,
            child: MapView1()),
        ],
      )),
  getForm(context),
  getWorkerList(context)
  ],
);

地图视图代码

     @override
  Widget build(BuildContext context) {
    return  GoogleMap(
     mapToolbarEnabled: true,
     myLocationEnabled: true,
     zoomGesturesEnabled: true,
     scrollGesturesEnabled: true,
     rotateGesturesEnabled: true,
     myLocationButtonEnabled: true,
     gestureRecognizers: Set()
       ..add(
           Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
       ..add(
         Factory<VerticalDragGestureRecognizer>(
             () => VerticalDragGestureRecognizer()),
       )
       ..add(
         Factory<HorizontalDragGestureRecognizer>(
             () => HorizontalDragGestureRecognizer()),
       )
       ..add(
         Factory<ScaleGestureRecognizer>(
             () => ScaleGestureRecognizer()),
       ),
     initialCameraPosition: CameraPosition(
       target: LatLng(41.143029, -8.611274),
       zoom: _currentZoom,
     ),
     markers: _markers,
     onMapCreated: (controller) => _onMapCreated(controller),
     onCameraMove: (position) => _updateMarkers(position.zoom),
            );
  }

想要的结果：

【问题讨论】：

你可以使用bottomSheet
但我们只需要在列表视图或列中
你试过在 ListView 或 Column 中使用吗？

标签： google-maps flutter dart flutter-listview

【解决方案1】：

将此行添加到您的 googlemap 小部件

gestureRecognizers: Set()..add(Factory<EagerGestureRecognizer>(() => EagerGestureRecognizer())),

喜欢这个

GoogleMap(
          mapType: MapType.normal,
          initialCameraPosition: CameraPosition(
            target: LatLng(double.parse(widget.latitude), double.parse(widget.longitude)),
            zoom: 15.4746,
          ),
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
          gestureRecognizers: Set()..add(Factory<EagerGestureRecognizer>(() => EagerGestureRecognizer())),
)

【讨论】：