Flutter之抽屜組件Drawer

Drawer（抽屜組件）

1、概述

Scalfold 是 Flutter MaterialApp 常用的佈局 Widget，接受一個 drawer屬性，支持配置 Drawer，可以實現從側邊欄拉出導航面板，好處是把一些功能菜單摺疊起來，通常Drawer是和Listview組件或者 Column組合使用進行縱向佈局。Listview組件是豎排排列的，上下可滑動。

【注意】如果沒有設置 AppBar 的 leading 屬性，則當使用 Drawer 的時候會自動顯示一個 IconButton 來告訴用戶有側邊欄（在 Android 上通常是顯示爲三個橫的圖標）。

2、Drawer組件常見屬性

child：Widget類型，可以放置任意可顯示對象
elevation：double類型，組件的Z座標的順序

import 'package:demo_app/pages/drawer/drawer.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(), 
      body: Container(), 
      drawer: DrawLayout()
    );
  }
}

import 'package:flutter/material.dart';

class DrawLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Text('drawer')
    );
  }
}

3、Drawer可以添加頭部效果

• DrawerHeader：展示頭部基本信息
• UserAccountsDrawerHeader：展示用戶頭像、用戶名、email等信息

4、DrawerHeader常用屬性

• child：Widget類型，Header裏面所顯示的內容控件
• padding、margin
• decoration：Decoration類型，header區域的decoration，通常用來設置背景顏色或者背景圖片。

import 'package:flutter/material.dart';

class DrawLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.all(0.0),
        children: <Widget>[
          DrawerHeader(
            child: Center(
              child: Text('drawer')
            ),
            decoration: BoxDecoration(
              color: Colors.blue
            ),
          )
        ]
      )
    );
  }
}

5、UserAccountsDrawerHeader常用屬性

• currentAccountPicture：Widget類型，用來設置當前用戶的頭像
• accountName：Widget類型，當前用戶的名字
• accountEmail：Widget類型，當前用戶的 Email
• onDetailsPressed： VoidCallback類型，當 accountName 或者 accountEmail 被點擊的時候所觸發的回調函數，可以用來顯示其他額外的信息
• otherAccountsPictures：List類型，用來設置當前用戶的其他賬號的頭像
• decoration：Decoration類型，header區域的decoration，通常用來設置背景顏色或者背景圖片。
• margin

import 'package:flutter/material.dart';

class DrawLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.all(0.0),
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text('username'),
            accountEmail: Text('[email protected]'),
            currentAccountPicture: CircleAvatar(
              child: Icon(Icons.home),
            ),
            onDetailsPressed: (){},
            otherAccountsPictures: <Widget>[
              CircleAvatar(
                child: Icon(Icons.settings)
              ),
            ],
            decoration: BoxDecoration(
              color: Colors.green
            ),
          ),
          ListTile(
            title: Text('設置'),
            leading: Icon(Icons.settings),
            trailing: Icon(Icons.arrow_forward_ios)
          )
        ]
      )
    );
  }
}