Flutter中带有Google地图和容器的Stack小部件

Question

我有一个Stack Widget, 其中包含了一个Google Maps地图和一个Container。

当我滚动屏幕并到达Container时，Container会忽略滚动手势。

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，现在我可以看到它们，但是当我手指触摸时会阻止谷歌地图界面的滚动。

- targiasld

---

分享一些代码。 - Hussnain Haidar

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

- Philéas

---

感谢分享，一定会很有帮助! - targiasld