底部导航栏问题（BottomNavigationBar）

1.当BottomNavigationBarItem的数量超过3个后与样式不一致

问题描述

当我们把BottomNavigationBarItem设置超过3个后会出现图标变白字体变白，使得我们无法清楚的看到效果

image.png

问题分析

通过度娘了解到BottomNavigationBar有个type属性，在查看源码后得知BottomNavigationBar未指定type时，当items个数未超过3个时会指定type为fixed反之会指定为shifting
fixed:固定类型,固定宽度
shifting:当你点击item时会有渐入渐出的动画效果
那么按道理这只是设置了当你点击Item时的效果而已，随后查看翻阅源码时发现这样一段描述

Item数量少于4个时（fixed），并且selectedItemColor这个属性未指定，那么会指定选中时的颜色为主题的颜色
Item数量有4个或以上时（shifting），并且selectedItemColor这个属性未指定，则会把所有的组件渲染为白色
附上此段解析的源码

ColorTween colorTween;
    switch (widget.type) {
      case BottomNavigationBarType.fixed:
        colorTween = ColorTween(
          begin: widget.unselectedItemColor ?? themeData.textTheme.caption.color,
          end: widget.selectedItemColor ?? widget.fixedColor ?? themeColor,
        );
        break;
      case BottomNavigationBarType.shifting:
        colorTween = ColorTween(
          begin: widget.unselectedItemColor ?? Colors.white,
          end: widget.selectedItemColor ?? Colors.white,
        );
        break;
    }

解决方式

根据分析可以提供两种解决思路
1.直接将 BottomNavigationBar 中的 type 属性设置为 BottomNavigationBarType.fixed 即可解决

image.png

2.如果需要使用到动画的话可以设置 BottomNavigationBar 的 selectedItemColor 和 unselectedItemColor

image.png

并且在探究这个问题的同时发现了一个好玩的东西

image.png

当我们把 BottomNavigationBar 中的 type 设置为 shifting时再把 BottomNavigationBarItem 的backgroundColor设置上，此时会把BottomNavigationBarItem 的 backgroundColor值投射到BottomNavigationBar的背景上

image.png

效果如图所示：

1.gif