1.當(dāng)BottomNavigationBarItem的數(shù)量超過3個后與樣式不一致
問題描述
當(dāng)我們把BottomNavigationBarItem設(shè)置超過3個后會出現(xiàn)圖標(biāo)變白字體變白，使得我們無法清楚的看到效果
問題分析
通過度娘了解到BottomNavigationBar有個type屬性秀存，在查看源碼后得知BottomNavigationBar未指定type時，當(dāng)items個數(shù)未超過3個時會指定type為fixed反之會指定為shifting
fixed:固定類型,固定寬度
shifting:當(dāng)你點擊item時會有漸入漸出的動畫效果
那么按道理這只是設(shè)置了當(dāng)你點擊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 即可解決
2.如果需要使用到動畫的話可以設(shè)置 BottomNavigationBar 的 selectedItemColor 和 unselectedItemColor
并且在探究這個問題的同時發(fā)現(xiàn)了一個好玩的東西
當(dāng)我們把 BottomNavigationBar 中的 type 設(shè)置為 shifting時再把 BottomNavigationBarItem 的backgroundColor設(shè)置上护姆，此時會把BottomNavigationBarItem 的 backgroundColor值投射到BottomNavigationBar的背景上
效果如圖所示：
