Drawer 与Scaffold一起使用。是Scaffold中drawer属性。drawer通常是一个ListView,它的第一个子视图是一个DrawerHeader,但我们通常使用UserAccountsDrawerHeader显示当前用户的状态信息。其余的drawer子元素通常由ListTile构造,通常以AboutListTile结束。
可以使用Navigator.pop(context)主动关闭Drawer。
参数讲解
属性 | 说明 |
Drawer | |
elevation | 背景高度 |
child | 子组件 |
semanticLabel | 标签 |
UserAccountsDrawerHeader | |
decoration | 头部装饰 |
margin | 外边距 默认8.0 |
currentAccountPicture | 主图像 |
otherAccountsPictures | 附图像 |
accountName | 标题 |
accountEmail | 副标题 |
onDetailsPressed | 点击监听 |
代码示例
简单创建侧滑菜单
return Scaffold(
appBar: AppBar(title: Text('Flutter Drawer'),),
drawer: Drawer(
child:Container(
alignment: Alignment.center,
child: Text('我是Drawer',style: TextStyle(fontSize: 30),),
),
),
body: Container(
alignment: Alignment.center,
child: Text('data')
),
);
进阶
drawer: Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountEmail: Text('wo shi Email'),
accountName: Text('我是Drawer'),
onDetailsPressed: () {},
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage('images/ab.jpg'),
),
),
ListTile(
title: Text('ListTile1'),
subtitle: Text('ListSubtitle1',maxLines: 2,overflow: TextOverflow.ellipsis,),
leading: CircleAvatar(child: Text("1")),
onTap: (){Navigator.pop(context);},
),
Divider(),//分割线
ListTile(
title: Text('ListTile2'),
subtitle: Text('ListSubtitle2',maxLines: 2,overflow: TextOverflow.ellipsis,),
leading: CircleAvatar(child: Text("2")),
onTap: (){Navigator.pop(context);},
),
Divider(),//分割线
ListTile(
title: Text('ListTile3'),
subtitle: Text('ListSubtitle3',maxLines: 2,overflow: TextOverflow.ellipsis,),
leading: CircleAvatar(child: Text("3")),
onTap: (){Navigator.pop(context);},
),
Divider(),//分割线
new AboutListTile(
icon: new CircleAvatar(child: new Text("4")),
child: new Text("AboutListTile"),
applicationName: "AppName",
applicationVersion: "1.0.1",
applicationIcon: new Image.asset(
'images/bb.jpg',
width: 55.0,
height: 55.0,
),
applicationLegalese: "applicationLegalese",
aboutBoxChildren: <Widget>[
new Text("第一条..."),
new Text("第二条...")
],
),
Divider(),//分割线
],
),
),