Flutter - Drawer 抽屜檢視與自定義header

RustFisher發表於2018-07-09
FlutterHeader

移動開發中，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效果

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

在自定義header的過程中，我們組合使用了多種widget； 有層疊的Stack，用於對齊的Align，設定具體尺寸和margin的Container，水平放置的Row以及豎直放置的Column。 這些widget的各有特點，根據具體情況來組合使用。同一個UI效果，做法也不止一種。

相關文章