颤振将容器从底部移动到顶部答案

【问题标题】：Flutter move container from bottom to top颤振将容器从底部移动到顶部
【发布时间】：2021-05-30 19:13:16
【问题描述】：

我正在使用谷歌地图 API，我需要在谷歌地图上显示一些带有一些 TextFormField 的容器。我面临的问题是我需要在谷歌地图上滚动容器。也就是说，当用户将容器从下往上移动时，容器才会像这样回到顶部。

我的代码

Stack(children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: GoogleMap(
                  markers: Set<Marker>.of(_markers.values),
                  onMapCreated: _onMapCreated,
                  initialCameraPosition: CameraPosition(
                    target: currentPostion,
                    zoom: 18.0,
                  ),
                  myLocationEnabled: true,
                  onCameraMove: (CameraPosition position) {
                    if (_markers.length > 0) {
                      MarkerId markerId = MarkerId(_markerIdVal());
                      Marker marker = _markers[markerId];
                      Marker updatedMarker = marker.copyWith(
                        positionParam: position.target,
                      );

                      setState(() {
                        _markers[markerId] = updatedMarker;
                      });
                    }
                  },
                ),
              ),
              Align(
                  alignment: Alignment.bottomCenter,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 8, right: 8),
                    child: Container(
                      color: Colors.white,
                      height: 300,
                      child: SingleChildScrollView(
                        child: Form(
                          key: _formKey,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              //TextForm here code is large thats why
                            ],
                          ),
                        ),
                      ),
                    ),
                  ))
            ])

我只是在使用堆栈。在 Stack 中，我有谷歌地图和容器。在容器中，我有一列包含 TextFields 和一个按钮。滚动时如何使容器与地图重叠？现在它在容器内滚动，但我需要一个可以像溢出一样在地图上滚动的容器。

【问题讨论】：

标签： flutter google-maps dart

【解决方案1】：

只需使用 DraggableScrollablesheet。这是一个示例：

DraggableScrollableSheet(
  initialChildSize: 0.2,
  minChildSize: 0.2,
  maxChildSize: 0.8,
  builder: (BuildContext context, ScrollController scrollController) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.blue,
        // border: Border.all(color: Colors.blue, width: 2),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
        ),
      ),
      child: Scrollbar(
        child: ListView.builder(
          controller: scrollController,
          itemCount: 25,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: const Icon(Icons.ac_unit),
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  },
);

我真的希望对你有所帮助！ :)

【讨论】：

【解决方案2】：

确实，您可以按照@Mesota22 的建议使用DraggableScrollablesheet。使用上面的示例代码，您可以将它放在带有GoogleMap 小部件的Stack 中。

 Stack(
    children: [
       GoogleMap( 
          //Widget properties
        ),
       DraggableScrollableSheet( 
         //Mesota22 sample code
         )
       ]
     ),

这是输出：

【讨论】：