class BottomSheetDemo extends StatefulWidget {
@override
_BottomSheetDemoState createState() => _BottomSheetDemoState();
}
class _BottomSheetDemoState extends State<BottomSheetDemo> {
final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();
// 底部滑动窗口
_openBottomSheet() {
_bottomSheetScaffoldKey.currentState.showBottomSheet((BuildContext context) {
return BottomAppBar(
child: Container(
height: 90.0,
width: double.infinity,
padding: EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Icon(Icons.pause_circle_outline),
SizedBox(width: 16.0,),
Text('01:30 / 03:30'),
Expanded(child: Text('Fix you - Coldplay', textAlign: TextAlign.right,)),
],
),
),
);
});
}
// 对话框式底部滑动窗口
Future _openModalBottomSheet() async {
final option = await showModalBottomSheet(context: context, builder: (BuildContext context) {
return Container(
height: 200,
child: Column(
children: <Widget>[
ListTile(title: Text('选项一'), onTap: () { Navigator.pop(context, '选项一');},),
ListTile(title: Text('选项二'), onTap: () { Navigator.pop(context, '选项二');},),
ListTile(title: Text('选项三'), onTap: () { Navigator.pop(context, '选项三');},),
],
),
);
});
print('点击了$option');
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _bottomSheetScaffoldKey,
appBar: AppBar(title: Text('BottomSheet'), elevation: 0.0,),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(child: Text('Open BottomSheet'), onPressed: _openBottomSheet),
FlatButton(child: Text('Modal BottomSheet'), onPressed: _openModalBottomSheet),
],
),
],
),
),
);
}
}
flutter底部弹出框bottomSheet
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 废话不多说 实现思路就是弹出框自定义 调用方法 实现方法 效果图 根据https://www.jianshu.c...
- 经过很多天折腾都没解决,之前是弹出2个对话框才解决的,而且关闭还关闭2个, 目前找到原因了,是activity的属...
- PS: 接触Flutter已经有一段时间了,默默的撸app也快接近尾声了,其中遇到了蛮多坑(或许也不叫做坑,只是功...