App中最常見(jiàn)的底部導(dǎo)航片酝，直接看看代碼
BottomNavigationBar({
Key key,
@required this.items, //必須有的item
this.onTap, //點(diǎn)擊事件
this.currentIndex = 0, //當(dāng)前選中
this.elevation = 8.0, //高度
BottomNavigationBarType type, //排列方式
Color fixedColor, //'Either selectedItemColor or fixedColor can be specified, but not both'
this.backgroundColor, //背景
this.iconSize = 24.0, //icon大小
Color selectedItemColor, //選中顏色
this.unselectedItemColor, //未選中顏色
this.selectedIconTheme = const IconThemeData(),
this.unselectedIconTheme = const IconThemeData(),
this.selectedFontSize = 14.0, //選中文字大小
this.unselectedFontSize = 12.0, //未選中文字大小
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels = true, //是否顯示選中的Item的文字
bool showUnselectedLabels, //是否顯示未選中的Item的問(wèn)題
})
常見(jiàn)問(wèn)題
1、設(shè)置BottomNavigationBar超過(guò)3個(gè)后挖腰，不顯示顏色
只有兩個(gè)的時(shí)候能正常顯示雕沿，這個(gè)時(shí)候并未設(shè)置顏色相關(guān)屬性，但是顯示的是primaryColor
new BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(IconFont.iconhome), title: new Text("首頁(yè)")),
BottomNavigationBarItem(
icon: new Icon(IconFont.iconcategory), title: new Text("分類")),
// BottomNavigationBarItem(
// icon: new Icon(IconFont.iconpic), title: new Text("妹子")),
// BottomNavigationBarItem(
// icon: new Icon(IconFont.iconaccount), title: new Text("我的"))
],
// selectedItemColor: Color(0xffff8635),
// unselectedItemColor: Color(0xff666666),
// type: BottomNavigationBarType.fixed,
// showUnselectedLabels: true,
),
大于三個(gè)之后無(wú)法正常顯示（變成了白色）
查看源碼其實(shí)發(fā)現(xiàn)猴仑，BottomNavigationBarType type, 默認(rèn)情況下审轮，item小于三個(gè) type = fixed，大于三個(gè)type = shifting;
static BottomNavigationBarType _type(
BottomNavigationBarType type,
List<BottomNavigationBarItem> items,
) {
if (type != null) {
return type;
}
return items.length <= 3 ? BottomNavigationBarType.fixed : BottomNavigationBarType.shifting;
}
然后默認(rèn)的選中和未選中的顏色是根據(jù)type變化的辽俗，源碼如下
switch (widget.type) {
case BottomNavigationBarType.fixed: //默認(rèn)fixed模式下使用主題色
colorTween = ColorTween(
begin: widget.unselectedItemColor ?? themeData.textTheme.caption.color,
end: widget.selectedItemColor ?? widget.fixedColor ?? themeColor,
);
break;
case BottomNavigationBarType.shifting: //默認(rèn)shifting模式下使用白色疾渣，白色？這其實(shí)就是看不見(jiàn)的原因
colorTween = ColorTween(
begin: widget.unselectedItemColor ?? Colors.white,
end: widget.selectedItemColor ?? Colors.white,
);
break;
}
那么這里就有解決方法了崖飘，如果只是要他顯示出來(lái)只需要改變模式 或者 設(shè)置默認(rèn)顏色
//設(shè)置默認(rèn)顏色
selectedItemColor: Color(0xffff8635),
unselectedItemColor: Color(0xff666666),
//BottomNavigationBarType改為fixed模式
type: BottomNavigationBarType.fixed,
這樣子其實(shí)Item都能顯示出來(lái)了榴捡。然后我們稍微分析一下fixed和shifting模式的區(qū)別，其實(shí)很簡(jiǎn)單就是朱浴，fixed模式是平分吊圾，而shifting模式是可以搖擺的达椰。但是可以看到設(shè)置了默認(rèn)顏色后，未選中的文字不顯示项乒，于是就有了第二個(gè)問(wèn)題
2啰劲、item大于三個(gè)的時(shí)候文字不顯示。
或者說(shuō)我假設(shè)希望用shifting模式檀何，怎么把文字顯示出來(lái)蝇裤。
由上一個(gè)問(wèn)題我們得知肯定是BottomNavigationBarType引起的，我們查看源碼控制是否顯示文字是由以下代碼控制埃碱，如果沒(méi)有傳值則由_defaultShowUnselected返回
showUnselectedLabels = showUnselectedLabels ?? _defaultShowUnselected(_type(type, items)),
_defaultShowUnselected中就得出了猖辫，shifting模式下默認(rèn)不顯示，fixed模式下默認(rèn)顯示砚殿。（其實(shí)這個(gè)本想吐槽的啃憎，但是仔細(xì)想想MD風(fēng)格中好像就是默認(rèn)不顯示的，顯然這里的shifting模式更符合MD風(fēng)格似炎，但是現(xiàn)在大家似乎更適合fixed模式）
static bool _defaultShowUnselected(BottomNavigationBarType type) {
switch (type) {
case BottomNavigationBarType.shifting:
return false;
case BottomNavigationBarType.fixed:
return true;
}
assert(false);
return false;
}
現(xiàn)在問(wèn)題就好解決了辛萍，那我給他默認(rèn)值就好了，這樣就能正常顯示出文字了羡藐。
new BottomNavigationBar(
//省略...
showUnselectedLabels: true,
),
總結(jié)
其實(shí)BottomNavigationBar就一個(gè)問(wèn)題贩毕，就是由于item數(shù)量引起的默認(rèn)BottomNavigationBarType不同導(dǎo)致的問(wèn)題。以上就大概講解了幾個(gè)重要的不同之處仆嗦。其他屬性如果有問(wèn)題的依次看下源碼就能輕松解決辉阶。
最后來(lái)個(gè)屬性齊全的代碼和樣式。（其實(shí)就是把開頭的代碼注釋去掉）
new BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(IconFont.iconhome), title: new Text("首頁(yè)")),
BottomNavigationBarItem(
icon: new Icon(IconFont.iconcategory), title: new Text("分類")),
BottomNavigationBarItem(
icon: new Icon(IconFont.iconpic), title: new Text("妹子")),
BottomNavigationBarItem(
icon: new Icon(IconFont.iconaccount), title: new Text("我的"))
],
selectedItemColor: Color(0xffff8635),
unselectedItemColor: Color(0xff666666),
type: BottomNavigationBarType.fixed,
showUnselectedLabels: true,
)
