移动开发中,drawerLayout抽屉视图是比较常用的一种控件。一般将用户的头像,用户名等信息在抽屉视图中呈现。
drawer中也可以提供一些选项,比如跳转去设置页,跳转去用户资料页面等等。
Flutter提供了Drawer
组件;结合ListView
等组件,开发者可以快速地制作出抽屉视图。
使用material中的UserAccountsDrawerHeader
使用material中的UserAccountsDrawerHeader
,设置accountName
和currentAccountPicture
。
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
Widget userHeader = UserAccountsDrawerHeader(
accountName: new Text('Tom'),
accountEmail: new Text('tom@xxx.com'),
currentAccountPicture: new CircleAvatar(
backgroundImage: AssetImage('images/pic1.jpg'), radius: 35.0,),);
return Scaffold(appBar: AppBar(title: Text("Home"),),
body: new Center(child: new Text('Home page'),),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
userHeader , // 可在这里替换自定义的header
ListTile(title: Text('Item 1'),
leading: new CircleAvatar(child: new Icon(Icons.school),),
onTap: () {
Navigator.pop(context);
},),
ListTile(title: Text('Item 2'),
leading: new CircleAvatar(child: new Text('B2'),),
onTap: () {
Navigator.pop(context);
},),
ListTile(title: Text('Item 3'),
leading: new CircleAvatar(
child: new Icon(Icons.list),),
onTap: () {
Navigator.pop(context);
},),
],
),
),);
}
}
使用UserAccountsDrawerHeader效果如下
UserAccountsDrawerHeader
文档请见
https://docs.flutter.io/flutter/material/UserAccountsDrawerHeader-class.html
自定义header
Flutter有DrawerHeader
,我们对其进行自定义。
DrawerHeader
设置padding为0,充满整个顶部DrawerHeader
的child使用Stack
,目的是放置背景图片- 在
Stack
偏左下的位置放置头像和用户名- 先用
Align
确定对齐方式为FractionalOffset.bottomLeft
Align
的child为Container
,并设定一个具体高度- 头像与文字的
Container
仿照ListTile
的风格,左边是一个头像,右边是文字;使用Row
来分隔头像和文字 - 文字部分先用
Container
的margin做出间隔,再放入一个Column
来存放Text
- 文字
Column
设置水平方向左对齐与竖直方向居中
- 先用
Widget header = DrawerHeader(
padding: EdgeInsets.zero, /* padding置为0 */
child: new Stack(children: <Widget>[ /* 用stack来放背景图片 */
new Image.asset(
'images/p_h_r_600.png', fit: BoxFit.fill, width: double.infinity,),
new Align(/* 先放置对齐 */
alignment: FractionalOffset.bottomLeft,
child: Container(
height: 70.0,
margin: EdgeInsets.only(left: 12.0, bottom: 12.0),
child: new Row(
mainAxisSize: MainAxisSize.min, /* 宽度只用包住子组件即可 */
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new CircleAvatar(
backgroundImage: AssetImage('images/pic1.jpg'),
radius: 35.0,),
new Container(
margin: EdgeInsets.only(left: 6.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start, // 水平方向左对齐
mainAxisAlignment: MainAxisAlignment.center, // 竖直方向居中
children: <Widget>[
new Text("Tom", style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w400,
color: Colors.white),),
new Text("What's up", style: new TextStyle(
fontSize: 14.0, color: Colors.white),),
],
),
),
],),
),
),
]),);
自定义header的效果图
在自定义header的过程中,我们组合使用了多种widget;
有层叠的Stack
,用于对齐的Align
,设定具体尺寸和margin的Container
,水平放置的Row
以及竖直放置的Column
。
这些widget的各有特点,根据具体情况来组合使用。同一个UI效果,做法也不止一种。