一開(kāi)始BottomNavigationBar的items設(shè)置了3個(gè)BottomNavigationBarItem，設(shè)置好背景色與文字的顏色，代碼如下：

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;
          });
        },
      ),
    );
  }

運(yùn)行結(jié)果如圖：

image.png

后來(lái)，添加第四個(gè)item時(shí)，出現(xiàn)了問(wèn)題，代碼如圖：

@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;
          });
        },
      ),
    );
  }

運(yùn)行結(jié)果如圖：

image.png

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

百思不得其解，后來(lái)點(diǎn)進(jìn)創(chuàng)建方法里面去看，看到這么一段話：

image.png

好吧，破案了，原來(lái)Flutter的BottomNavigationBar如果不指定type，則當(dāng)items小于4個(gè)時(shí)，類型是fixed，大于或等于4個(gè)時(shí)，自動(dòng)變成了shifting，WTF，這也太秀了吧?。。。?/em>

解決方法就是，指定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;
          });
        },
      ),

最終結(jié)果：

image.png