Flutter - Drawer 抽屉视图与自定义header-白红宇

移动开发中，drawerLayout抽屉视图是比较常用的一种控件。一般将用户的头像，用户名等信息在抽屉视图中呈现。 drawer中也可以提供一些选项，比如跳转去设置页，跳转去用户资料页面等等。

Flutter提供了Drawer组件；结合ListView等组件，开发者可以快速地制作出抽屉视图。

使用material中的`UserAccountsDrawerHeader`

使用material中的UserAccountsDrawerHeader，设置accountName和currentAccountPicture。

class MyHomePage extends StatefulWidget {  @override  State
    
      createState() {    return new _MyHomePageState();  }}class _MyHomePageState extends State
     
       {  @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: 
      
       [            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: 
    
     [ /* 用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: 
     
      [                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: 
      
       [                      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效果，做法也不止一种。

使用material中的UserAccountsDrawerHeader

自定义header

使用material中的`UserAccountsDrawerHeader`