Flutter上带有Google Maps和Container的Stack Widget

Question

我有一个堆栈小部件，而堆栈中的小部件是Google Maps Map，在其上是容器。

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

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(),
        ),
      );
    });

}

我想在Google Maps上看到HelpCallCards，我可以看到它们。但是当我的手指触摸到它时，它阻止了Google Maps ui滚动。

Answer 1

此问题有些老旧，但我的回答可能会对其他人有所帮助。

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

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
    ),
  ],
);