底部導(dǎo)航 參考
1、普通效果：我們可以通過
Scaffold的bottomNavigationBar屬性來設(shè)置底部導(dǎo)航襟锐，通過Material組件庫提供的BottomNavigationBar和BottomNavigationBarItem兩種組件來實現(xiàn)Material風(fēng)格的底部導(dǎo)航欄审磁。
2没炒、如圖效果：Material組件庫中提供了一個BottomAppBar組件帜矾，它可以和FloatingActionButton配合實現(xiàn)這種“打洞”效果豺型。
實現(xiàn)如圖“打洞”效果
底部
BottomAppBar的child設(shè)置為Row赏陵，并且將Row用其children5 等分饼齿，中間的位置空出（我的實現(xiàn)方法）。在Scaffold中設(shè)置floatingActionButton蝙搔，并且設(shè)置floatingActionButtonLocation為FloatingActionButtonLocation.centerDocked缕溉。
代碼如下：
Scaffold(
//...省略部分代碼
floatingActionButton: FloatingActionButton(
//懸浮按鈕
child: Icon(Icons.add),
onPressed: () {}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: pages[currentIndex],
bottomNavigationBar: BottomAppBar(
child: Row(
children: <Widget>[
SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(0)),
SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(1)),
SizedBox(height: 49, width: itemWidth),
SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(2)),
SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(3))
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
),
shape: CircularNotchedRectangle(),
),
);
自定義 Item View
上述代碼中，其中4個item都是
SizedBox(height: 49, width: itemWidth, child: bottomAppBarItem(0))（中間的為空白吃型，itemWidth為double itemWidth = MediaQuery.of(context).size.width / 5;）证鸥。bottomAppBarItem方法，傳入底部導(dǎo)航item的index，返回Widget枉层，代碼如下：
Widget bottomAppBarItem(int index) {
//設(shè)置默認未選中的狀態(tài)
TextStyle style = TextStyle(fontSize: 12, color: Colors.black);
String imgUrl = normalImgUrls[index];
if (currentIndex == index) {
//選中的話
style = TextStyle(fontSize: 13, color: Colors.blue);
imgUrl = selectedImgUrls[index];
}
//構(gòu)造返回的Widget
Widget item = Container(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset(imgUrl, width: 25, height: 25),
Text(
titles[index],
style: style,
)
],
),
onTap: () {
if (currentIndex != index) {
setState(() {
currentIndex = index;
});
}
},
),
);
return item;
}
變量解釋
pages為要顯示的每一頁Widget泉褐；
currentIndex表示當(dāng)前選中底部item的index；
titles底部item顯示的文字列表鸟蜡；
normalImgUrls為未選中狀態(tài)的圖片地址列表膜赃；
selectedImgUrls為選中狀態(tài)的圖片地址列表。
未選中與選中狀態(tài)
Image和Text默認設(shè)為未選中圖片及樣式揉忘，判斷如果currentIndex == index的話跳座，就改為選中狀態(tài)圖片及樣式，這樣構(gòu)建item的時候就可以泣矛。
點擊切換
在每個item的
onTap事件中如果currentIndex != index（不處理點擊當(dāng)前選中的item的情況） 則currentIndex = index躺坟，調(diào)用setState()重新build，body: pages[currentIndex]即可顯示最新的頁面乳蓄。
Tips
現(xiàn)在雖然實現(xiàn)了簡單的效果咪橙，但是尚有不足，優(yōu)化篇了解一下虚倒。
