Flutter 搭建具有 Drawer 和 BottomNavigationBar 的靜態專案框架

void _initData() {
/*
* 初始化選中和未選中的icon
*/
tabImages = [
[
getTabImage('images/bar_home_unselected.png'),
getTabImage('images/bar_home_selected.png')
],
[
getTabImage('images/bar_publish_unselected.png'),
getTabImage('images/bar_publish_selected.png')
],
[
getTabImage('images/bar_me_unselected.png'),
getTabImage('images/bar_me_selected.png')
]
];
/*
* 三個子介面
*/
_pageList = [
new HomePage(),
new FunctionPage(),
new MinePage(),
];
}

ps: 每個頁面建立可檢視文末的原始碼

可以先看官方文件中給的例子，也可以檢視我這裡實現的例子，虛擬碼如下：

_initData();
 return Scaffold(
// 內容
body: _pageList[_tabIndex],
// 導航欄
bottomNavigationBar: new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: getTabIcon(0), title: getTabTitle(0)),
new BottomNavigationBarItem(
icon: getTabIcon(1), title: getTabTitle(1)),
new BottomNavigationBarItem(
icon: getTabIcon(2), title: getTabTitle(2)),
],
// 點選 item 會有淡入淡出效果
type: BottomNavigationBarType.shifting,
//預設選中首頁
currentIndex: _tabIndex,
// 圖示大小
iconSize: 24.0,
// 點選事件
onTap: _onItemTapped,
),
);

Scaffold Widget 提供了基本的 Material Design 佈局所以我們直接 return new Scaffold 元件。
body: _pageList[_tabIndex]

body 每個 tab 元件顯示的內容，這裡通過一個集合來裝載 tab 對應的頁面，然後通過點選獲取到 _tabIndex 索引，最後再去集合中索引出對應的頁面。
bottomNavigationBar

底部 tab 欄， items 集合存放的就是每個 tab item 。而 BottomNavigationBarItem 就是具體 tab 顯示的圖片和文字資訊。 type 表示底部導航欄的樣式，這裡有兩個值，一個是 shifting ，也就是截圖中的效果，另一個是 fixed ，就是常規的底部導航欄。 onTap: _onItemTapped 表示點選後的操作。

ps：方法前加 _ 表示方法是私有的

_onItemTapped 的虛擬碼如下：

void _onItemTapped(int index) {
setState(() {
_tabIndex = index;
});
}

主要就是重新整理了 _tabIndex 的值，使 body: _pageList[_tabIndex] 能夠重新整理到對應的頁面。

側邊欄實現分析

側邊欄頂部沉浸式
側邊欄自定義圖示以及全域性開啟方式

實現的虛擬碼如下：

// 初始化資料
_initData();
return Scaffold(
key: _globalKey,
// 側邊欄
drawer: new Drawer(
child: ListView(
// 去除頂部灰色條
padding: EdgeInsets.zero,
children: <Widget>[
userHeader,
ListTile(
title: Text("註冊登入"),
leading: Icon(Icons.favorite),
onTap: () => _onPageOpen(context, "註冊登入"),
),
ListTile(
title: Text("設定"),
leading: Icon(Icons.settings),
onTap: () => _onPageOpen(context, "設定"),
),
],
),
),
// 內容
body: _pageList[_tabIndex],
// 導航欄
bottomNavigationBar: new BottomNavigationBar(),
);

側邊欄頂部 padding: EdgeInsets.zero, 即可去掉頂部灰色條條。

側邊欄的開啟方式有兩種：

一個是在當前的 Scaffold 元件下的 drawer 裡邊通過點選事件呼叫

Scaffold.of(context).openDrawer();

定義一個全域性的 key ，例如我們本例中實現的。

由於是全域性的側邊欄可開啟，因此我們在 MainPage.dart 檔案中宣告全域性對的 key ,然後通過構造方法傳參的方式將 key 傳遞給 HomePage.dart 頁面，那麼這時候點選 HomePage.dart 頁面左上角的圖示的時候就可以通過下面的程式碼來開啟側邊欄了

leading: Builder(builder: (context) {
return IconButton(
icon: Icon(Icons.menu), //自定義圖示
onPressed: () {
// 開啟抽屜選單
_globalKey.currentState.openDrawer();
},
);

側邊欄關閉可通過點選事件呼叫

Navigator.pop(context); // 關閉側邊欄

更多側邊欄相關內容可檢視這篇部落格 Flutter之drawer詳細分析（你要的操作都有）

原始碼

如果對你有幫助，請幫忙點個 star ，謝謝~

如有錯誤歡迎指出，共同進步。

原始碼地址： FlutterTest

Flutter 搭建具有 Drawer 和 BottomNavigationBar 的靜態專案框架

文章目錄

實現分析

首頁實現分析

側邊欄實現分析

原始碼

您可能也會喜歡…