本課時將介紹一些比較通用的導(dǎo)航欄功能，并應(yīng)用上一課時的知識來實現(xiàn)導(dǎo)航欄跳轉(zhuǎn)對應(yīng)頁面的功能。

導(dǎo)航欄樣式效果

目前較為常見三種導(dǎo)航欄功能：底部導(dǎo)航欄、頂部導(dǎo)航欄和側(cè)邊導(dǎo)航欄。為了更好的界面效果，我在導(dǎo)航欄基礎(chǔ)上增加了搜索功能模塊的實現(xiàn)，完善了整個界面交互效果。我們先來看看這三種導(dǎo)航欄+搜索功能的運行效果。

圖 1 底部導(dǎo)航欄+搜索欄

圖 2 頂部導(dǎo)航欄+搜索欄

圖 3 側(cè)邊欄+搜索欄+底部導(dǎo)航欄

圖 4 側(cè)邊欄+搜索欄+頂部導(dǎo)航欄

上面就是本課時所需要實現(xiàn)的全部導(dǎo)航欄功能，接下來我們就逐個介紹下如何實現(xiàn)該功能。

導(dǎo)航欄實現(xiàn)

導(dǎo)航欄功能會涉及 Flutter 中幾個核心點，我們使用如下表格的方式來說明，后續(xù)內(nèi)容遇到相應(yīng)的知識點后，可以直接對照表格 1 。

圖 1 底部導(dǎo)航欄+搜索欄

可以看到上述導(dǎo)航欄都是 Scaffold 的一個屬性，這就類似于一個架子，架子提供了很多模塊。如果我們需要某些模塊，只需要按照模塊的格式插入數(shù)據(jù)，就可以實現(xiàn)相應(yīng)功能。這個控件的一些參數(shù)應(yīng)用具體如下。

1. 底部導(dǎo)航欄

根據(jù)控件 Scaffold 的說明，其中涉及 bottomNavigationBar 這個屬性名，在表格 1 中有說明到該屬性對應(yīng)的是一個 BottomNavigationBar 組件，該組件的屬性也比較多，如下所示。

介紹完一些基礎(chǔ)屬性以后，我們來嘗試實現(xiàn)頂部導(dǎo)航欄功能?；谏弦徽n時我們實現(xiàn)的兩個頁面功能，現(xiàn)在我們需要使用導(dǎo)航欄的方式來支持頁面跳轉(zhuǎn)。底部導(dǎo)航欄需要一個狀態(tài)屬性 indexValue 來控制導(dǎo)航欄顯示位置，我們看下具體在 Scaffold 中的代碼邏輯。

上面代碼中，第 5 - 10 行是獲取具體的頁面信息，并且在 _getPagesWidget 里會判斷當(dāng)前 index 的值，判斷當(dāng)前索引 _indexNum 與 index 是否相同，相同則顯示頁面，不相同則頁面隱藏，具體 _getPagesWidget 代碼實現(xiàn)邏輯如下：

上面代碼中又使用到了 router 的一個新方法，該方法組件是獲取對應(yīng) router 名稱的組件頁面信息，具體代碼在 router 中實現(xiàn)，可以參考 github 源碼，沒有特殊性。

Scaffold 中代碼的第 12 行開始實現(xiàn)底部導(dǎo)航欄邏輯，其中使用到了 BottomNavigationBar 控件，配置控件中的 items 屬性，該屬性注意是導(dǎo)航欄具體每一項數(shù)據(jù)，iconSize、currentIndex、fixedColor、type 和 onTap，onTap 主要是來切換頁面，觸發(fā) setState ，然后重新 build 頁面結(jié)構(gòu)。

以上就完成了導(dǎo)航欄的設(shè)計，運行完以后，就可以正常進(jìn)行頁面切換操作。但是這里存在一些問題，比如在我們上一課時提到的外部拉起 APP 功能，如果拉起的是首頁，我們不應(yīng)該再去 push 一個新的頁面，而是打開首頁并且根據(jù)具體的頁面跳轉(zhuǎn)到具體的 tab 下，因此這里需要將 router 中的 push 進(jìn)行修改。

我們將原來的 push 改為 open，并且對代碼做了修改，具體代碼如下：

上面代碼與我們之前唯一的不同在于，判斷是否在 entrance 頁面，如果是則返回相應(yīng) tab 的 index，而不是直接進(jìn)行跳轉(zhuǎn)。如果不是則進(jìn)行跳轉(zhuǎn)，并返回一個 -1 notEntrancePageIndex。因為返回不一樣，因此在 entrance.dart 中也需要對返回的信息做一定的處理，處理部分代碼如下。

代碼主要是判斷是否返回非 -1 以及兩個 index 不相等，這時候就使用 setState 來切換導(dǎo)航欄 tab。

2. 頂部導(dǎo)航欄

在表格 1 中我們看到頂部導(dǎo)航欄，需要控件 Scaffold 屬性 appBar ，在 appBar 中設(shè)置 bottom 就可以實現(xiàn)頂部導(dǎo)航欄功能。接下來看下 bottom 的設(shè)置方法，代碼如下：

在上面代碼中的第 4 到第 21 行是在設(shè)置 bottom 的 TabBar 組件。在 TabBar 中，包含了一個控制導(dǎo)航欄的 controller 和具體導(dǎo)航欄的配置信息的 Tabs。在代碼第 22 行到第 29 行也是在配置各個 tab 對應(yīng)的頁面內(nèi)容組件，這里也是通過 controller 來控制顯示，具體 controller 控制部分代碼如下。

頂部導(dǎo)航欄的跳轉(zhuǎn)邏輯部分和底部導(dǎo)航欄相似，這里是使用狀態(tài)變量 _controller 的 animateTo 方法來處理 tab 的切換。其他部分代碼改動和底部導(dǎo)航欄都基本一致，具體代碼參考 github 源碼。

3. 側(cè)邊導(dǎo)航欄

側(cè)邊欄在表格 1 中，可以看到使用的是 Scaffold 的 drawer 屬性。該屬性需要一個 Drawer 對象，因此我們在 Widgets 目錄中創(chuàng)建一個 menu 目錄，并新增 draw.dart 文件，具體代碼如下。

前 4 行是導(dǎo)入相應(yīng)的庫，創(chuàng)建 MenuDraw 類，類包含 redirect 方法，該方法就是 entrance 中聲明的 tab 導(dǎo)航欄切換的方法，如果非 entrance 的切換則需要使用到 router 跳轉(zhuǎn)，類似上面代碼中的第 33 行 。

代碼的第 19 行到第 44 行則為相應(yīng)的左側(cè)導(dǎo)航欄的配置，onTap 為導(dǎo)航欄的跳轉(zhuǎn)邏輯，在點擊相應(yīng)的 Tap 以后，需要使用 Navigator.pop(context) 來關(guān)閉左側(cè)導(dǎo)航欄。

實現(xiàn)完成該 MenuDraw 類后，我們需要在控件 Scaffold 中增加 drawer 屬性，代碼如下。

上面代碼的第 5 行就是新增 drawer 左側(cè)導(dǎo)航欄。

4. 搜索功能

為了讓功能更完善，我們需要增加一個右側(cè)搜索功能，這里就涉及表格 1 中 AppBar 的 actions 屬性，我們可以在 AppBar 中增加如下代碼：

在 actions 中可以添加一組功能按鈕，由于這里我們只需要搜索功能按鈕，因此在 actions 屬性中添加一個 IconButton 即可。IconButton 中需要展示一個搜索 icon ，并且點擊以后前往搜索頁面。

接下來我們就需要實現(xiàn) SearchPageCustomDelegate 的頁面邏輯，新增 search_page 頁面，并在 search_page 下新建 custom_delegate.dart 文件，接下來實現(xiàn)該文件代碼。

這個類需要繼承 SearchDelegate ，然后必須包含四個方法的實現(xiàn)邏輯，代碼如下。

buildActions 為右側(cè)的圖標(biāo)按鈕，一般我們可以顯示一個清除搜索框內(nèi)容的功能，我們可以使用如下代碼來實現(xiàn)。

buildLeading 為左側(cè)的按鈕一般來觸發(fā)返回操作，代碼實現(xiàn)如下：

關(guān)閉當(dāng)前頁面使用 close(context, null) 即可實現(xiàn)。

buildResults 為搜索結(jié)果顯示列表，buildSuggestions 為搜索提示列表，在這里我們返回一個空 ListView() 就行。

在上面基礎(chǔ)上，我們需要修改默認(rèn)的搜索框的提示，并且需要匹配當(dāng)前主題的顏色字體等，需要做以下兩部分邏輯。

上面代碼中第 2 行是修改默認(rèn)搜索框提示，第 5 至第 17 行則是匹配當(dāng)前應(yīng)用主題。完整代碼可 參考 github 源碼。: https://github.com/love-flutter/flutter-column

總結(jié)

本課時介紹了控件 Scaffold 的一些基礎(chǔ)用法，著重介紹了其中三個比較常用的屬性 bottomNavigationBar、appBar 和 drawer，同時使用這些屬性完成了我們頂部導(dǎo)航欄、底部導(dǎo)航欄、側(cè)邊導(dǎo)航欄和搜索功能的實現(xiàn)。學(xué)完本課時你需要掌握這些基礎(chǔ)的導(dǎo)航欄設(shè)計的使用方法，其次了解控件 Scaffold 的其他屬性的用法。

本課時實現(xiàn)了 App 的基礎(chǔ)結(jié)構(gòu)，下一課時我將從內(nèi)容展示的多樣式來實現(xiàn)具體的 App 頁面內(nèi)容。

點擊此鏈接查看本課時源碼: https://github.com/love-flutter/flutter-column