Flutter——Drawer、DrawerHeader、UserAccountsDrawerHeader組件（側邊欄組件）

在 Scaffold 組件里面傳入 drawer 參數可以定義左側邊欄，傳入 endDrawer 可以定義右側邊欄。側邊欄默認是隱藏的，我們可以通過手指滑動顯示側邊欄，也可以通過點擊按鈕顯示側邊欄。

 

DrawerHeader組件的常用屬性：

屬性	描述
decoration	設置頂部背景顏色
child	配置子元素
padding	內邊距
margin	外邊距

 

 UserAccountsDrawerHeader組件的常用屬性：

屬性	描述
decoration	設置頂部背景顏色
accountName	賬戶名稱
accountEmail	賬戶郵箱
currentAccountPicture	用戶頭像
otherAccountsPictures	用來設置當前賬戶其他賬戶頭像
margin

 

 

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "DrawerWidget",
    home: Scaffold(
      appBar: AppBar(title: Text("DrawerWidget")),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            DrawerHeader(
              child: Text("你好，Flutter")
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text("我的空間"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.search),
              ),
              title: Text("我的查詢"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.palette),
              ),
              title: Text("我的作品"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.camera),
              ),
              title: Text("我的圈子"),
            ),
            Divider(),
          ],
        ),
      ),
    ),
  ));
}

 

補充一個小技巧。

在Drawer組件點擊跳轉到其他頁面時，返回的時候想看到直接關閉Drawer的頁面。

可以先pop掉。

onTap:(){
    Navigator.of(context).pop();
    Navigator.pushNamed(context,"/xxx")    
}