Flutter笔记(一)：BottomNavigationBar常见问题

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

查看源码其实发现，BottomNavigationBarType type, 默认情况下，item小于三个 type = fixed，大于三个type = shifting;

  static BottomNavigationBarType _type(
      BottomNavigationBarType type,
      List 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,

5.jpg

这样子其实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,
 ),

6.jpg

总结

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

7.jpg

完整代码

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