我正在开发一个新的Flutter项目，该项目应该在屏幕上方显示一个Google Map，在屏幕下方显示一个包含信息和操作的面板，就像您在屏幕截图中看到的那样:
我想创建一种隐藏面板并在用户点击关闭按钮时或在用户向下滑动面板时以全屏显示 map 的方法，另一种方式是，用户应该能够单击按钮以得到初步的看法。
在这里，您可以看到类(class)的主体:
body: Stack(
children: [
GoogleMap(
padding: EdgeInsets.only(bottom: bottomPaddingOfMap),
mapType: MapType.normal,
compassEnabled:true,
myLocationButtonEnabled: true,
myLocationEnabled: true,
zoomGesturesEnabled: true,
zoomControlsEnabled: true,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller){
_controllerGoogleMap.complete(controller);
newGoogleMapController = controller;
setState(() {
bottomPaddingOfMap = 300.0;
});
locatePosition();
},
),
//extra hamburger Drawer
Positioned(
top: 45.0,
left: 22.0,
child: GestureDetector(
onTap: (){
scaffoldKey.currentState.openDrawer();
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22.0),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 6.0,
spreadRadius: 0.5,
offset: Offset(
0.7,
0.7,
),
),
],
),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(Icons.menu, color: Colors.black,),
),
),
),
),
Positioned(
left: 0.0,
right: 0.0,
bottom: 0.0,
child: Container(
height: 350.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0)),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 16.0,
spreadRadius: 0.5,
offset: Offset(0.7, 0.7),
)
]
),
child:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: SizedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
RaisedButton.icon(
icon: Icon(Icons.cake),
label: Text("Close"),
onPressed: (){
print("pulsaado");
},
),
],
),
),
),
SizedBox(height: 6.0,),
Text("Hi there!", style: TextStyle(fontSize: 18.0),),
Text("Where do you want to create an alert?", style: TextStyle(fontSize: 20.0, fontFamily: "Brand-Bold"),),
SizedBox(height: 20.0,),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 6.0,
spreadRadius: 0.5,
offset: Offset(0.7, 0.7),
),
],
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
Icon(Icons.search, color: Colors.blueAccent ),
SizedBox(width: 10.0,),
Text("Search Drop Off"),
],
),
),
),
SizedBox(height: 24.0,),
Row(
children: [
Icon(Icons.home, color: Colors.grey,),
SizedBox(width: 12.0,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Add Home"),
SizedBox(height: 4.0,),
Text("Your living home address", style: TextStyle(color: Colors.black54, fontSize: 12.0),),
],
),
],
),
SizedBox(height: 10.0,),
DividerWidget(),
SizedBox(height: 16.0,),
Row(
children: [
Icon(Icons.home, color: Colors.grey,),
SizedBox(width: 12.0,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Add Work"),
SizedBox(height: 4.0,),
Text("Your office address", style: TextStyle(color: Colors.black54, fontSize: 12.0),),
],
),
],
)
],
),
),
),
),
],
),
最佳答案
为此，您必须更改三件事:
首先，从StatelessWidget转换为StatefulWidget；
其次，为容器的高度创建一个变量，并初始化初始高度。
线程，您必须使用AnimatedContaire广告创建函数onPressd来更改容器，如下所示:
AnimatedContainer(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 6.0,
spreadRadius: 0.5,
offset: Offset(0.7, 0.7),
),
],
),
duration: Duration(milliseconds: 1),
height: heigntValue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
RaisedButton(
onPressed: () {
setState(() {
if (heigntValue == 350) {
heigntValue -= 300;
} else {
heigntValue += 300;
}
print(heigntValue);
});
},
),
],
),
),
],
),
),
关于flutter - 带有 map 和信息面板的应用程序屏幕应在按钮单击或向下滑动时隐藏和显示面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64630845/