首页 > 解决方案 > Flutter Google Maps 无法使用嵌套导航器拖动地图

问题描述

关于如何使用堆栈和嵌套导航器拖动谷歌地图,我被困了大约 6 天,下面是使用导航器的屏幕截图和代码:

使用嵌套导航器的图像

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Stack(
          children: [
            GoogleMap(
                mapType: MapType.normal,
                initialCameraPosition: CameraPosition(
                  target: LatLng(-6.168033, 106.900467),
                  zoom: 14,
                ),
                onMapCreated: (GoogleMapController controller) {

                },
                onTap: (position) {
                  print('tap map');
                }
            ),
            Navigator(
              onGenerateRoute: (settings) {
                return PageRouteBuilder(
                    opaque: false,
                    transitionDuration: Duration(milliseconds: 0),
                    reverseTransitionDuration: Duration(milliseconds: 0),
                    pageBuilder: (BuildContext context, _, __) {
                      return Center(child: Text('you cannot drag the maps outside this text'));
                    }
                  );
              },
            )
          ],
        )
    );
  }

如果我只使用容器而不是导航器,谷歌地图可以像下面的截图一样被拖动:

未使用嵌套导航器的图像

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Stack(
          children: [
            GoogleMap(
                mapType: MapType.normal,
                initialCameraPosition: CameraPosition(
                  target: LatLng(-6.168033, 106.900467),
                  zoom: 14,
                ),
                onMapCreated: (GoogleMapController controller) {

                },
                onTap: (position) {
                  print('tap map');
                }
            ),
            Container(
              child: Center(child: Text('you can drag the maps outside this text')),
            ),
          ],
        )
    );
  }

我想要实现的是使用嵌套导航器,因此我可以从页面/屏幕移动到另一个页面/屏幕并使用后台堆栈中的谷歌地图。

实际上我尝试用 IgnorePointer 包裹 Navigator 并且可以拖动地图,但是 IgnorePointer 会忽略整个屏幕,所以我不能使用它,因为在 NestedNavigator 上的每个屏幕中都会有一些内容,如按钮、向上滑动面板、底页等。

任何人都可以帮助我吗?

感谢您的任何帮助

标签: flutterstackflutter-navigationgoogle-maps-flutterflutter-ignore-pointer

解决方案


推荐阅读