Flutter BottomNavigationBar新增Item后背景色异常，如何设置指定背景色？

这是因为Flutter的BottomNavigationBar默认存在逻辑：当item数量≥4时，会自动切换为shifting类型，该类型下每个BottomNavigationBarItem的backgroundColor会覆盖组件的整体背景色。你新增的第四个item未设置背景色，因此默认显示白色。

方法一：强制设置为fixed类型 #

直接给BottomNavigationBar添加type: BottomNavigationBarType.fixed属性，无论item数量多少，都会使用你设置的mainBgColor作为整体背景：

bottomNavigationBar: BottomNavigationBar(
                unselectedItemColor: secondaryColor.withOpacity(0.5),
                selectedItemColor: secondaryColor,
                elevation: 5,
                backgroundColor: mainBgColor,
                // 新增该行，强制固定类型
                type: BottomNavigationBarType.fixed,
                currentIndex: widget.index,
                onTap: _onItemTapped,
                items: const [
                  BottomNavigationBarItem(
                      icon: Icon(
                        Icons.add,
                        size: 20.0,
                      ),
                      label: 'New'),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Icons.near_me,
                        size: 20.0,
                      ),
                      label: 'Find'),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Icons.wallet,
                        size: 20.0,
                      ),
                      label: 'Wallet'),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Icons.wallet,
                        size: 20.0,
                      ),
                      label: ''),
                ],
              ),

方法二：给每个item设置背景色 #

如果需要保留shifting类型的动画效果，可以给每个BottomNavigationBarItem都加上backgroundColor: mainBgColor：

BottomNavigationBarItem(
    icon: Icon(Icons.add, size: 20.0),
    label: 'New',
    backgroundColor: mainBgColor // 新增该行
),

所有item都添加该属性后，背景色会统一为mainBgColor。

内容的提问来源于stack exchange，提问作者Ballazx