在 Flutter 中使用 Google Maps 和 Container 堆叠 Widget答案

【问题标题】：Stack Widget with Google Maps and Container on it in Flutter在 Flutter 中使用 Google Maps 和 Container 堆叠 Widget
【发布时间】：2019-12-21 11:30:33
【问题描述】：

我有一个堆栈小部件，堆栈内的小部件是一个谷歌地图地图，上面是一个容器。

当我在滚动时滚动并到达容器时，它会忽略滚动手势。

return mapsService.loading
    ? Loading()
    : Stack(
      children: <Widget>[

        Scaffold(
        body: Container(
          child: GoogleMap(
            markers: Set<Marker>.of(mapsService.markers.values),
            mapType: MapType.normal,
            initialCameraPosition: mapsService.cameraPosition,
            onMapCreated: (GoogleMapController controller) {
              mapsService.controller.complete(controller);
            },
          ),
        ),
        floatingActionButtonLocation:
            FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          backgroundColor:
              mapsService.dangerLevel[mapsService.currentDanger],
          child: const Icon(Icons.warning),
          onPressed: () {
            print("FLOATINGACTIONBUTTON GEDRÜCKT!");
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return ChangeNotifierProvider.value(
                      value: MapsService(), child: HelpCallAlertDialog());
                });
          },
        ),
        bottomNavigationBar: BottomAppBar(
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.swap_horizontal_circle),
                onPressed: () {
                  mapsService.changeDangerLevel();
                },
              ),
              FlatButton(
                child: Text(mapsService.helpCallsCount.toString()),
                onPressed: () async {
                  mapsService.getHelpCallSize();
                },
              ),
            ],
          ),
        ),
      ),
      HelpCallCard(),
      ],
    );

HelpCallCard 类

return StreamBuilder<QuerySnapshot>(
    stream: mapsService.helpCalls,
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (!snapshot.hasData) return Container();

      return Container(
        height: 200,
        color: Colors.green,
        child: ListView(
          scrollDirection: Axis.horizontal,
          children:
              snapshot.data.documents.map((DocumentSnapshot document) {
            return IgnorePointer(
                              child: Container(
                                color: Colors.white,
                child: Column(children: <Widget>[
                  Text(document.data["latitude"].toString()),
                  Text("Faszinierend!"),
                ],),
              ),
            );
          }).toList(),
        ),
      );
    });

}

我想要我的谷歌地图上的 HelpCallCards，我可以看到它们。但是当我的手指触摸它时它会阻止谷歌地图用户界面滚动

【问题讨论】：

分享一些代码。

标签： flutter google-maps dart

【解决方案1】：

这个问题很老了，但我的回答可能对其他人有所帮助。

我在使用 Mapbox 库而不是 Google 地图时遇到了类似的问题。我的解决方法是手动定义容器高度，并确保我的前景容器没有占用屏幕上的所有空间。

return new Stack(
  children: <Widget>[
    new Container(
      height: 1000, // This line solved the issue
      child: FullMapPage(), // Mapbox
    ),
    new Container(
      alignment: Alignment.bottomLeft,
      child: FirestoreSlideshow(), // My cards showing in front of the Map's
    ),
  ],
);

【讨论】：

感谢分享，一定会有所帮助！