一开始BottomNavigationBar的items设置了3个BottomNavigationBarItem，设置好背景色与文字的颜色，代码如下：

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(_getCurrentTitle(), style: const TextStyle(color: Colors.white),),
          actions: _showScreen(),
        ),
        body: _getCurrentContent(),
      bottomNavigationBar: BottomNavigationBar(
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.white,
        backgroundColor: Theme.of(context).primaryColor,
        items: [
          BottomNavigationBarItem(
            icon: const Icon(Icons.home,),
            title: const Text(
              '英雄'
            )
          ),
          BottomNavigationBarItem(
              icon: const Icon(Icons.apps,),
              title: const Text(
                  '物品'
              )
          ),
          BottomNavigationBarItem(
              icon: const Icon(Icons.insert_emoticon,),
              title: const Text(
                  '技能'
              )
          ),
        ],
        currentIndex: _currentTabbarIndex,
        onTap: (int index) {
          setState(() {
            _currentTabbarIndex=index;
          });
        },
      ),
    );
  }

运行结果如图：

image.png

后来，添加第四个item时，出现了问题，代码如图：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(_getCurrentTitle(), style: const TextStyle(color: Colors.white),),
          actions: _showScreen(),
        ),
        body: _getCurrentContent(),
      bottomNavigationBar: BottomNavigationBar(
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.white,
        backgroundColor: Theme.of(context).primaryColor,
        items: [
          BottomNavigationBarItem(
            icon: const Icon(Icons.home,),
            title: const Text(
              '英雄'
            )
          ),
          BottomNavigationBarItem(
              icon: const Icon(Icons.apps,),
              title: const Text(
                  '物品'
              )
          ),
          BottomNavigationBarItem(
              icon: const Icon(Icons.insert_emoticon,),
              title: const Text(
                  '技能'
              )
          ),
          BottomNavigationBarItem(
              icon: const Icon(Icons.book,),
              title: const Text(
                  '铭文'
              )
          ),
        ],
        currentIndex: _currentTabbarIndex,
        onTap: (int index) {
          setState(() {
            _currentTabbarIndex=index;
          });
        },
      ),
    );
  }

运行结果如图：

image.png

• WTF，背景色居然消失了，文字也消失了。

百思不得其解，后来点进创建方法里面去看，看到这么一段话：

image.png

好吧，破案了，原来Flutter的BottomNavigationBar如果不指定type，则当items小于4个时，类型是fixed，大于或等于4个时，自动变成了shifting，WTF，这也太秀了吧！！！！

解决方法就是，指定type，最终代码如下，一切就正常了。

BottomNavigationBar(
        type: BottomNavigationBarType.fixed,//指定为fixed就解决了。
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.white,
        backgroundColor: Theme.of(context).primaryColor,
        items: [
          BottomNavigationBarItem(
            icon: const Icon(Icons.home,),
            title: const Text(
              '英雄'
            )
          ),
          BottomNavigationBarItem(
              icon: const Icon(Icons.apps,),
              title: const Text(
                  '物品'
              )
          ),
          BottomNavigationBarItem(
              icon: const Icon(Icons.insert_emoticon,),
              title: const Text(
                  '技能'
              )
          ),
          BottomNavigationBarItem(
              icon: const Icon(Icons.book,),
              title: const Text(
                  '铭文'
              )
          ),
        ],
        currentIndex: _currentTabbarIndex,
        onTap: (int index) {
          setState(() {
            _currentTabbarIndex=index;
          });
        },
      ),

最终结果：

image.png