Drawer 側邊欄、以及側邊欄內 容布局

一、Flutter Drawer 側邊欄

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

return Scaffold(

  appBar: AppBar(

    title: Text("Flutter App"),

  ),

  drawer: Drawer(

    child: Text('左側邊欄'),

  ),

  endDrawer: Drawer(

    child: Text('右側側邊欄'),

  ),

);

 

二、DrawerHeader

常見屬性：

decoration  設置頂部背景顏色

child  配置子元素

padding  內邊距

margin  外邊距 

 

三、Flutter UserAccountsDrawerHeader

decoration  設置頂部背景顏色

accountName  賬戶名稱

accountEmail  賬戶郵箱

currentAccountPicture  用戶頭像

otherAccountsPictures  用來設置當前賬戶其他賬戶頭像

margin 

 

四、Flutter 側邊欄路由跳轉

onTap: (){

   Navigator.of(context).pop();

   Navigator.pushNamed(context, '/search');

}

 

案例代碼

import 'package:flutter/material.dart';
import '../home.dart';

class My extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              decoration: BoxDecoration(
                  image:DecorationImage( image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover )
              ),
            ),
            ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
//              Navigator.of(context).pop();
//              Navigator.pushNamed(context, '/search');
              Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 1)), (route) => route == null);
            },),
            ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
//              Navigator.of(context).pop();
//              Navigator.pushNamed(context, '/search');
              Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 2)), (route) => route == null);
            }),

          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text('右側'),
      ),
    );
  }
}