时间戳

首页 > 解决方案 > 我怎样才能让这个折叠栏与我的谷歌地图一起显示？

flutter - 我怎样才能让这个折叠栏与我的谷歌地图一起显示？

问题描述

在学习颤振设计的细节方面遇到问题......有人知道我如何让折叠导航侧边栏适合我的谷歌地图吗？我希望地图在它的右边。我的地图顶部还有一些以堆栈形式存在的浮动文本小部件。如果我删除我的谷歌地图，该栏会显示并正常工作。启用我的地图后它不可见。

return Stack(children: [
      Scaffold(
          key: _scaffoldKey,
          resizeToAvoidBottomPadding: true,
          appBar: AppBar(
            elevation: 0.0,
            backgroundColor: drawerBackgroundColor,
            title: Text(
              "Collapsing Navigation Drawer/Sidebar",
            ),
          ),
          body: Stack(children: <Widget>[
            Container(
              color: selectedColor,
            ),
            CollapsingNavigationDrawer(),
            Stack(children: <Widget>[
              Container(
                child: GoogleMap(
                    markers: Set<Marker>.of(markers.values),
                    initialCameraPosition:
                        CameraPosition(target: LatLng(lat, lng), zoom: 10.0),
                    myLocationEnabled: true,
                    compassEnabled: true,
                    myLocationButtonEnabled: true,
                    mapType: MapType.normal,
                    onMapCreated: (GoogleMapController controller) {
                      controller.setMapStyle(Utils.mapStyles);
                    }),
              ),

标签： flutterdartflutter-layout

解决方案

Stack 接受多个孩子并从下到上对它们进行排序。所以第一项是最底部的，最后一项是最顶部的。所以先放置地图，然后放置 CollapsingNavigationDrawer

Stack(children: <Widget>[
            Stack(children: <Widget>[
              Container(
                child: GoogleMap(
                    markers: Set<Marker>.of(markers.values),
                    initialCameraPosition:
                        CameraPosition(target: LatLng(lat, lng), zoom: 10.0),
                    myLocationEnabled: true,
                    compassEnabled: true,
                    myLocationButtonEnabled: true,
                    mapType: MapType.normal,
                    onMapCreated: (GoogleMapController controller) {
                      controller.setMapStyle(Utils.mapStyles);
                    }),
              ),
              CollapsingNavigationDrawer(),
]

推荐阅读