Flutter 将容器从下到上移动

Question

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

我的代码

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 中，我有谷歌地图和容器。在容器中，我有一列包含文本字段和一个按钮。当我滚动时如何使容器与地图重叠？现在它在容器内滚动，但我需要一个可以像溢出一样在地图上滚动的容器。

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

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