App中最常见的底部导航，直接看看代码
BottomNavigationBar({
Key key,
@required this.items, //必须有的item
this.onTap, //点击事件
this.currentIndex = 0, //当前选中
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的问题
})
常见问题
1、设置BottomNavigationBar超过3个后，不显示颜色
只有两个的时候能正常显示，这个时候并未设置颜色相关属性，但是显示的是primaryColor
new BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(IconFont.iconhome), title: new Text("首页")),
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,
),
大于三个之后无法正常显示（变成了白色）
查看源码其实发现，BottomNavigationBarType type, 默认情况下，item小于三个 type = fixed，大于三个type = shifting;
static BottomNavigationBarType _type(
BottomNavigationBarType type,
List<BottomNavigationBarItem> items,
) {
if (type != null) {
return type;
}
return items.length <= 3 ? BottomNavigationBarType.fixed : BottomNavigationBarType.shifting;
}
然后默认的选中和未选中的颜色是根据type变化的，源码如下
switch (widget.type) {
case BottomNavigationBarType.fixed: //默认fixed模式下使用主题色
colorTween = ColorTween(
begin: widget.unselectedItemColor ?? themeData.textTheme.caption.color,
end: widget.selectedItemColor ?? widget.fixedColor ?? themeColor,
);
break;
case BottomNavigationBarType.shifting: //默认shifting模式下使用白色，白色？这其实就是看不见的原因
colorTween = ColorTween(
begin: widget.unselectedItemColor ?? Colors.white,
end: widget.selectedItemColor ?? Colors.white,
);
break;
}
那么这里就有解决方法了，如果只是要他显示出来只需要改变模式 或者 设置默认颜色
//设置默认颜色
selectedItemColor: Color(0xffff8635),
unselectedItemColor: Color(0xff666666),
//BottomNavigationBarType改为fixed模式
type: BottomNavigationBarType.fixed,
这样子其实Item都能显示出来了。然后我们稍微分析一下fixed和shifting模式的区别，其实很简单就是，fixed模式是平分，而shifting模式是可以摇摆的。但是可以看到设置了默认颜色后，未选中的文字不显示，于是就有了第二个问题
2、item大于三个的时候文字不显示。
或者说我假设希望用shifting模式，怎么把文字显示出来。
由上一个问题我们得知肯定是BottomNavigationBarType引起的，我们查看源码控制是否显示文字是由以下代码控制，如果没有传值则由_defaultShowUnselected返回
showUnselectedLabels = showUnselectedLabels ?? _defaultShowUnselected(_type(type, items)),
_defaultShowUnselected中就得出了，shifting模式下默认不显示，fixed模式下默认显示。（其实这个本想吐槽的，但是仔细想想MD风格中好像就是默认不显示的，显然这里的shifting模式更符合MD风格，但是现在大家似乎更适合fixed模式）
static bool _defaultShowUnselected(BottomNavigationBarType type) {
switch (type) {
case BottomNavigationBarType.shifting:
return false;
case BottomNavigationBarType.fixed:
return true;
}
assert(false);
return false;
}
现在问题就好解决了，那我给他默认值就好了，这样就能正常显示出文字了。
new BottomNavigationBar(
//省略...
showUnselectedLabels: true,
),
总结
其实BottomNavigationBar就一个问题，就是由于item数量引起的默认BottomNavigationBarType不同导致的问题。以上就大概讲解了几个重要的不同之处。其他属性如果有问题的依次看下源码就能轻松解决。
最后来个属性齐全的代码和样式。（其实就是把开头的代码注释去掉）
new BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(IconFont.iconhome), title: new Text("首页")),
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,
)
