1.當(dāng)BottomNavigationBarItem的數(shù)量超過3個后與樣式不一致

問題描述

當(dāng)我們把BottomNavigationBarItem設(shè)置超過3個后會出現(xiàn)圖標(biāo)變白字體變白，使得我們無法清楚的看到效果

image.png

問題分析

通過度娘了解到BottomNavigationBar有個type屬性，在查看源碼后得知BottomNavigationBar未指定type時，當(dāng)items個數(shù)未超過3個時會指定type為fixed反之會指定為shifting
fixed:固定類型,固定寬度
shifting:當(dāng)你點(diǎn)擊item時會有漸入漸出的動畫效果
那么按道理這只是設(shè)置了當(dāng)你點(diǎn)擊Item時的效果而已，隨后查看翻閱源碼時發(fā)現(xiàn)這樣一段描述

Item數(shù)量少于4個時（fixed），并且selectedItemColor這個屬性未指定，那么會指定選中時的顏色為主題的顏色
Item數(shù)量有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;
    }

解決方式

根據(jù)分析可以提供兩種解決思路
1.直接將 BottomNavigationBar 中的 type 屬性設(shè)置為 BottomNavigationBarType.fixed 即可解決

image.png

2.如果需要使用到動畫的話可以設(shè)置 BottomNavigationBar 的 selectedItemColor 和 unselectedItemColor

image.png

并且在探究這個問題的同時發(fā)現(xiàn)了一個好玩的東西

image.png

當(dāng)我們把 BottomNavigationBar 中的 type 設(shè)置為 shifting時再把 BottomNavigationBarItem 的backgroundColor設(shè)置上，此時會把BottomNavigationBarItem 的 backgroundColor值投射到BottomNavigationBar的背景上

image.png

效果如圖所示：

1.gif