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,
      ),

1.jpg

大于三個之后無法正常顯示（變成了白色）

2.jpg

查看源碼其實發(fā)現(xiàn)，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;
  }

然后默認的選中和未選中的顏色是根據(jù)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,

5.jpg

這樣子其實Item都能顯示出來了。然后我們稍微分析一下fixed和shifting模式的區(qū)別，其實很簡單就是，fixed模式是平分，而shifting模式是可以搖擺的。但是可以看到設置了默認顏色后，未選中的文字不顯示，于是就有了第二個問題

2、item大于三個的時候文字不顯示。

或者說我假設希望用shifting模式，怎么把文字顯示出來。
由上一個問題我們得知肯定是BottomNavigationBarType引起的，我們查看源碼控制是否顯示文字是由以下代碼控制，如果沒有傳值則由_defaultShowUnselected返回

showUnselectedLabels = showUnselectedLabels ?? _defaultShowUnselected(_type(type, items)),

_defaultShowUnselected中就得出了，shifting模式下默認不顯示，fixed模式下默認顯示。（其實這個本想吐槽的，但是仔細想想MD風格中好像就是默認不顯示的，顯然這里的shifting模式更符合MD風格，但是現(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)在問題就好解決了，那我給他默認值就好了，這樣就能正常顯示出文字了。

new BottomNavigationBar(
//省略...
       showUnselectedLabels: true,
 ),

6.jpg

總結

其實BottomNavigationBar就一個問題，就是由于item數(shù)量引起的默認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,
    )

7.jpg

完整代碼

https://github.com/leiyun1993/FlutterDemo-GankIO