Flutter圈子Flutter学习日记

底部导航栏问题(BottomNavigationBar)

2020-04-04  本文已影响0人  DarkFade

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.如果需要使用到动画的话可以设置 BottomNavigationBarselectedItemColorunselectedItemColor

image.png

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


image.png

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

image.png

效果如图所示:

1.gif
上一篇 下一篇

猜你喜欢

热点阅读