Drawer
Drawer是Android开发中Material风格常用的设计,就是我们常说的“抽屉”效果,一个从侧边栏拉出来的导航面板。
在Flutter使用Material风格,最为常用的组件之一就是Scaffold了;Scaffold的drawer属性是一个Widget类型的组件,从左侧边栏拉出,通常就是用一个Drawer对象实现(Scaffold的endDrawer属性定义了一个从右侧边栏拉出的导航面板);
如果没有设置AppBar的leading属性,则当使用Drawer的时候会自动显示一个IconButton来告诉用户有侧边栏(在 Android 上通常是显示为三个横的图标)。
Drawer的child属性定义了其展示的内容,通常是用一个 ListView来实现,而在ListView最上面通常会有个 DrawerHeader来设置当前用户的基本信息,最常用的一个具体的 DrawerHeader 是 UserAccountsDrawerHeader 。
DrawerHeader的使用
-
decoration
header区域的decoration,通常用来设置背景颜色或者背景图片 -
margin
Header四周的间隙 默认值:EdgeInsets.only(bottom: 8.0) -
padding
Header里面内容控件的padding值,如果child为null,则这个值无效 默认值:const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0) -
duration
和curve
如果decoration发生了变化,则会使用 curve设置的变化曲线和duration设置的动画时间来做一个切换动画 -
child
Header里面所显示的内容控件
DrawerHeader(
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
),
child: Center(
child: SizedBox(
width: 60.0,
height: 60.0,
child: CircleAvatar(
child: Text('R'),
),
),
),
),
UserAccountsDrawerHeader的使用
如果想在DrawerHeader中显示用户账户信息,比如类似于 Gmail 的 联系人头像、用户名、Email 等信息,则可以使用 UserAccountsDrawerHeader这个特殊的DrawerHeader。
UserAccountsDrawerHeader(
//通常用来设置背景颜色或者背景图片
decoration: BoxDecoration(
image: DecorationImage(
//设置UserAccountsDrawerHeader背景图
image: NetworkImage(
'http://img02.tooopen.com/images/20131212/sy_51552288528.jpg'),
fit: BoxFit.cover),
),
//当前用户的名字
accountName: Text('我是Drawer'),
//当前用户的Email
accountEmail: Text('wo shi Email'),
//用来设置当前用户的头像
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
'http://b-ssl.duitang.com/uploads/item/201507/04/20150704212949_PSfNZ.jpeg'),
),
//当 accountName 或者 accountEmail 被点击的时候所触发的回调函数,可以用来显示其他额外的信息
// onDetailsPressed: () {
// print("onDetailsPressed");
// },
//用来设置当前用户的其他账号的头像(最多显示三个)
// otherAccountsPictures: <Widget>[
// CircleAvatar(
// backgroundImage: NetworkImage(
// 'http://img02.tooopen.com/images/20131212/sy_51552288528.jpg'),
// ),
// ],
),
在菜单 Item 部分我们使用 ListTile 来处理,左边是一个图标右边是文字的样式。
ListTile(
leading: Icon(Icons.settings),
title: Text('设置'),
),
Divider(), //分割线
ListTile(
leading: Icon(Icons.close),
title: Text('关闭'),
onTap: () => Navigator.pop(context), // 关闭抽屉
)
手动打开与关闭Drawer抽屉
代码中打开抽屉菜单的方法在ScaffoldState中,通过Scaffold.of(context)可以获取父级最近的Scaffold 组件的State对象。
Scaffold.of(context).openDrawer(), // 打开抽屉
Navigator.pop(context), // 关闭抽屉
leading: Builder(
builder: (context) => GestureDetector(
child: Padding(
padding: EdgeInsets.all(8.0),
child: new Icon(Icons.home),
),
onTap: () => Scaffold.of(context).openDrawer(), // 打开抽屉
),
),
ListTile(
leading: Icon(Icons.close),
title: Text('关闭'),
onTap: () => Navigator.pop(context), // 关闭抽屉
)
禁止手势侧滑出Drawer
默认是带手势侧滑的,那如何禁止手势侧滑出Drawer,我们只需要修改一个属性即可
drawerEdgeDragWidth: 0.0,