Flutter UI基础 - Drawer 抽屉视图与自定义header

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

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

使用material中的UserAccountsDrawerHeader

使用material中的UserAccountsDrawerHeader,设置accountNamecurrentAccountPicture

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('[email protected]'),
      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效果如下

Flutter UI基础 - Drawer 抽屉视图与自定义header_第1张图片

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的效果图

Flutter UI基础 - Drawer 抽屉视图与自定义header_第2张图片

 

在自定义header的过程中,我们组合使用了多种widget;
有层叠的Stack,用于对齐的Align,设定具体尺寸和margin的Container,水平放置的Row以及竖直放置的Column
这些widget的各有特点,根据具体情况来组合使用。同一个UI效果,做法也不止一种。

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(Flutter)