最近公司專案開發已經到了尾聲，我這邊也計劃用Flutter重新寫一遍公司專案，作為公司新技術引入學習，這專案我計劃全部用Flutter自帶的小部件來開發，不用任何第三方專案，這樣做的目的是為了學習新技術，熟悉原汁原味的Flutter自帶小部件，當然這個專案也是我們公司所有前端小夥伴和技術開發人員都能來參與進來，也希望大家能夠積極參與進來一起學習新技術，為公司儲存新技術。

我公司前端現狀

作為一個北上廣回重慶家鄉發展的前端工程師，來分析一下我現在公司前端技術現狀，前端技術原本就是一個雜而亂、多而繁的技術。特別是二三線城市技術人員的技術參差不齊，而且技術態度也很凌亂，在這樣的一個大環境下想完全一下子改善是很難的，我們公司目前前端分佈情況也很緊張，面對業務也很繁瑣而多，技術也是想到哪兒用到哪兒，APP分為Android，IOS開發，有後臺WEB開發，同時配備了H5混合APP開發，而且還有小程式也是H5來分擔，在任務繁瑣的眼前，每個開發人員在積極完成交代的任務後，基本無過多時間來學習新的專案，每次的迭代都是為了完成工期而無任何架構程式碼品質可言，作為公司有自己產品來講，對技術人員的要求還是很高的，不光是要完成任務，而且還要保證程式碼品質，空閒還要進行程式碼重構是非常重要的，如果直接下達重構程式碼任務是很難進行的，程式碼沒有任何BUG前讓開發人員動程式碼是很有牴觸心理的，所以我的安排就是先從人員技術培訓開發，後續我這邊會安排更多的培訓來讓大家明白程式碼品質對於一個有自己產品的公司來講是非常重要的。讓大家明白我們不是在完成任務，我們每一句程式碼對產品以後能不能走的更遠是非常重要的。

接下來我這邊會安排定期更新一些Flutter文章，都是原汁原味的Flutter原生API搭建的技術文章,[不忘初心,方得始終],做事情只有不忘記自己最初持守的信念，到最後就一定能獲得成功。

Flutter版本的APP底部導航欄選擇

底部導航欄大家應該見過很多很多了，手機上的APP用這樣的導航方式已經很正常了，最開始也有過很多其他的嘗試方式，比如側滑欄來導航的，生命力最強的導航方式就是底部樣式是最久的了，直接開啟Flutter官網API，可以很清楚的檢視到有如下幾個API：

CupertinoTabScaffoldCupertinoTabViewCupertinoTabBarBottomNavigationBar這幾個導航小部件有什麼區別嗎？怎麼選擇了？

Flutter CupertinoTabScaffold 實現iOS應用程式的選項卡式的根佈局與結構。一個在底部放置標籤欄，標籤欄之間或後面放置內容的腳手架。

CupertinoTabView具有其自己的導航器狀態和歷史記錄的單個選項卡檢視。一個典型的選項卡檢視，用作CupertinoTabScaffold 中每個選項卡的內容，可以將多個具有並行導航狀態和歷史記錄的選項卡共存。

CupertinoTabBar iOS樣式的底部導航選項卡欄。使用BottomNavigationBarItem顯示多個選項卡，其中一個選項卡處於活動狀態，預設情況下第一個選項卡。

BottomNavigationBar顯示在應用程式底部的材質小部件，用於在少量檢視（通常在三到五個之間）中選擇。

看上面的介紹，其中有幾個是IOS樣式風格，然後就是Android樣式風格的導航樣式，一般作為底部導航選擇我們用的比較多的就是「BottomNavigationBar」這個部件了，底部導航一般在3到5個之間，所以我們選擇它再合適不過了。

BottomNavigationBar導航部件用法

底部導航欄通常與Scaffold結合使用，我們先看下 BottomNavigationBar 元件的建構函式：

BottomNavigationBar

items：這是一個 BottomNavigationBarItem 陣列，@required 修飾符表明此引數是預設一定要傳的，而且至少2個。官方有建議底欄數目最好是3～5個。關於 BottomNavigationBarItem 元件下面還會說到。onTap：導航欄的點選事件，通過它來切換頁面currentIndex：用來表明當前選中的是哪一個底部itemelevation：陰影高度type：底部item型別，有兩種可選：fixed 自適應，shifting 選擇放大。如果未指定，則它會自動設定為 BottomNavigationBarType.fixed(當專案少於四個時)，否則預設為 BottomNavigationBarType.shifting。fixedColor：被選中 item 的 icon 和 label 顏色。這個屬性已經淘汰了，只是為了向後相容留著的。更建議使用 selectedItemColor 屬性。backgroundColor：底部導航欄顏色iconSize：item圖示大小selectedItemColor：功能同 fixedColor，兩者只能設定一個，建議選 selectedItemColor。unselectedItemColor：未選中 item 的顏色selectedIconTheme：選中 item 的 icon 樣式unselectedIconTheme：未選中 item 的 icon 樣式selectedFontSize：選中 item 的 label 字號unselectedFontSize：未選中 item 的 label 字號。可以看到，預設選中和未選中兩者字號是不一樣的，切換的時候就會有動態變化。如果有需要保持一致，兩個屬性設定成一樣大就可以了selectedLabelStyle：選中 item 的 label 樣式unselectedLabelStyle：未選中 item 的 label 樣式showSelectedLabels：是否要展示選中 item 的 label，預設是showUnselectedLabels：是否要展示未選中 item 的 labelBottomNavigationBarItem建構函式如下icon：導航欄item的圖示，一定要設定的title：item的label，雖然沒有加@required 修飾符，但是也是一定要設定的，否則會報：Every item must have a non-null titleactiveIcon：選中 item 的圖示backgroundColor：底部導航欄的背景動畫的顏色。當導航欄的型別是 BottomNavigationBarType.shifting時，給 item 設定這個屬性會生效。

完成效果圖：

總結：

原始碼就不拿出來了，雖然是公司新技術學習專案，但是整個圖示都是用的公司專案圖示，所有的網路請求都是用的公司API。暫時分享到這裡。歡迎大家點贊，轉發，關注，評論。