flutter - 带有地图和信息面板的应用程序屏幕应在按钮单击或向下滑动时隐藏和显示面板
问题描述
我正在开发一个新的 Flutter 项目,该项目应该在屏幕上半部分显示谷歌地图,在屏幕下半部分显示包含信息和操作的面板,就像您在屏幕截图中看到的那样:
我想创建一种方法来隐藏面板并在用户点击关闭按钮或用户向下滑动面板时全屏显示地图,反之亦然,用户应该能够单击按钮获得初始视图。这里有类的主体:
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);
});
},
),
],
),
),
],
),
),
推荐阅读
- php - 无法从容器中获取 IriConverter,因为它不是公开的
- ios - Dart PKCS12 p12 pfx 生成
- apify - Apify中如何提高爬取速度?
- algorithm - 计算笛卡尔平面中许多点之间的距离并将其分组
- python - Python 3.8.1 错误:列表未正确更新
- javascript - 从Javascript中的对象数组中过滤未定义或空字符串
- apache-spark-sql - spark sql 中是否存在用于在发出“select *”后排除字段的本机功能?(例如 - “选择*
字段 1,字段 2,字段") - python-3.x - 如何在 Python3 中传递许多参数来制作模板?
- jquery - Marketo 表单复选框 - 选中另一个复选框时取消选中复选框
- javascript - JavaScript - 向上或向下移动 JSON 数组