flutter-widget-BottomNavigationBar

这是一个底部导航栏组件，由文本标签，图标或两者的形式的多个项目组成。他通常是作为Scaffold中的bottomNavigationBar使用，下面我们来看看它的属性

BottomNavigationBar({
  Key key,
  @required this.items,
  this.onTap,
  this.currentIndex = 0,
  BottomNavigationBarType type,
  this.fixedColor,
  this.iconSize = 24.0,
})

• items：其实是List，其实就是底部的图标及文字，list的size有多大就有几个底部tab
• onTap：底部tab的点击事件，是一个参数为int的函数
• currentIndex：当前选中的item是哪个
• type：确定BottomNavigationBarItem的布局方式，值有两种类型
  • fixed：固定宽度，点击时不会移动，并且无论有多少个item都平分底栏，标签文字自动省略若干
  • shifting：有动画效果，点击时淡入，但是此时fixedColor就失效了，而且默认只显示图标，点击时才显示出文字

fix模式效果图如下：

这里设置了选中时的颜色（icon+label），但并未设置未选中时的颜色，但是可以看到系统给了默认值，接着我们将home的默认颜色修改为black，并且设置activeIcon，整个bar的type改为shifting

bottomNavigationBar: BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text("home",style: TextStyle(color: Colors.black),),
        activeIcon: Icon(
          Icons.home,
          color: Colors.purple,
        )),
    BottomNavigationBarItem(
        icon: Icon(Icons.business), title: Text("business")),
    BottomNavigationBarItem(
        icon: Icon(Icons.school), title: Text("school")),
    BottomNavigationBarItem(
        icon: Icon(Icons.school), title: Text("school")),
    BottomNavigationBarItem(
        icon: Icon(Icons.school), title: Text("school")),
    BottomNavigationBarItem(
        icon: Icon(Icons.school), title: Text("school")),
    BottomNavigationBarItem(
        icon: Icon(Icons.school), title: Text("school")),
  ],
  currentIndex: _selectedIndex,
  onTap: (int currIndex) {
    _changeIndex(currIndex);
  },
  fixedColor: Theme.of(context).primaryColor,
  type: BottomNavigationBarType.shifting,
)

可以看到其他几个图标的默认颜色没了，label也不显示了,而且选中图标颜色是我设置的，而不是fixedColor。所以如果是这种模式我们需要在BottomNavigationBarItem中设置背景色、选中图标以及未选中图标的样式颜色等