Drawer實現側邊欄佈局

在 Scaffold 組件裏面傳入 drawer 參數能夠定義左側邊欄，傳入 endDrawer 能夠定義右側邊欄。側邊欄默認是隱藏的，咱們能夠經過手指滑動顯示側邊欄，也能夠經過點擊按鈕顯示側邊欄。 

咱們仍是在前面TabBar項目的基礎上實現側邊欄。

爲了能在底部TabBar的三個頁面都實現側邊欄效果，這裏將側邊欄加在Tabs.dart頁面中。

只須要在

BottomNavigationBar下面繼續添加drawer屬性就能夠了。

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget {
   final index;
  Tabs({Key key,this.index=0}) : super(key: key);

  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {

  // int _currentIndex=0;
   int _currentIndex;
  _TabsState(index){
    this._currentIndex=index;
  }
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   
          onTap: (int index){
              setState(() {  
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //選中的顏色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs能夠有多個按鈕
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首頁")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分類")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("設置")
            )
          ],
        ),
        drawer: Drawer(
          child:Text('這裏是測邊欄')
        ),
      );
  }
}

此時在頂部會出現一個可點擊的圖標按鈕，無論是點擊這個按鈕仍是滑動屏幕，都會出現側邊欄：

   

 若是要實現右邊的側邊欄，只須要使用endDrawer就能夠了：

上面的樣式太醜了，因此，能夠稍微調整一下了：

    

如今，雖然側邊欄裏面多了一下內容，可是頂部仍是出現了遮蓋的現象，所以，能夠藉助DrawerHeader 組件來設置一下側邊欄頂部的樣式。

DrawerHeader 

 在flutter中，DrawerHeader 有如下一些經常使用的屬性：

• decoration ：設置頂部背景顏色 
• child ：配置子元素 
• padding ：內邊距 
• margin ：外邊距 

   

如今，藉助了DrawerHeader實現了側邊欄的頭部樣式，除此以外，還能夠藉助UserAccountsDrawerHeader實現側邊欄頭部的佈局。

UserAccountsDrawerHeader

 在flutter中，UserAccountsDrawerHeader有如下一些經常使用的屬性：

• decoration ：設置頂部背景顏色 
• accountName：帳戶名稱 
• accountEmail ：帳戶郵箱 
• currentAccountPicture ：用戶頭像 
• otherAccountsPictures ：用來設置當前帳戶其餘帳戶頭像 
• margin ：

    

側邊欄中的路由跳轉

要實現路由跳轉，首先須要有供跳轉的頁面：

User.dart

import 'package:flutter/material.dart';

class UserPage extends StatelessWidget {
  const UserPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("用戶中心"),
      ),
    );
  }
}

而後配置路由：

 最後，在用戶中心處添加路由跳轉按鈕就能夠了。可是有一個問題：在側邊欄進行路由跳轉，那麼側邊欄是開啓的，這樣，頁面跳轉後再返回，側邊欄仍是存在的，而且動畫上面還會出現不流暢性，所以，在路由跳轉前，須要先隱藏側邊欄：

    

Tabs.dart

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget {
  // Tabs({Key key}) : super(key: key);
  // _TabsState createState() => _TabsState();
   final index;
  Tabs({Key key,this.index=0}) : super(key: key);

  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {

  // int _currentIndex=0;
   int _currentIndex;
  _TabsState(index){
    this._currentIndex=index;
  }
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   //配置對應的索引值選中
          onTap: (int index){
              setState(() {  //改變狀態
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //選中的顏色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs能夠有多個按鈕
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首頁")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分類")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("設置")
            )
          ],
        ),
        drawer: Drawer(
          child:Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    // child: DrawerHeader(
                    //   child: Text('你好'),
                    //   decoration: BoxDecoration(
                    //     color:Colors.yellow,
                    //     image: DecorationImage(
                    //       image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3230740943,2194698121&fm=27&gp=0.jpg"),
                    //       fit:BoxFit.cover,
                    //     ),
                    //   ),
                    // ),
                    child:UserAccountsDrawerHeader(
                      currentAccountPicture: CircleAvatar(
                        backgroundImage: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1547205045,3791549413&fm=27&gp=0.jpg"),
                      ),
                      accountName: Text('側邊欄'),
                      accountEmail: Text('12345678@qq.com'),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3230740943,2194698121&fm=27&gp=0.jpg"),
                          fit:BoxFit.cover,
                        )
                      ),
                    ),
                  ),
                ],
              ),
              ListTile(
                leading: CircleAvatar(child: Icon(Icons.home)),
                title:Text('個人主頁')
              ),
              Divider(),  //一根線的效果
              ListTile(
                leading: CircleAvatar(child: Icon(Icons.people)),
                title:Text('用戶中心'),
                onTap: (){
                  Navigator.of(context).pop();  //隱藏側邊欄
                  Navigator.pushNamed(context, '/user');//路由跳轉
                },
              ),
              Divider(),
              ListTile(
                leading: CircleAvatar(child: Icon(Icons.settings)),
                title:Text('設置中心')
              ),
            ],
          )
        ),
      );
  }
}

 

 代碼下載：點這裏（提取碼：ukur）