添加超过 3 个项目后，Flutter BottomNavigationBar 颜色变为透明

Question

真是奇怪。 添加超过 3 BottomNavigationBarItems 将 BottomNavigationBar 的默认图标和背景颜色更改为透明。

这是为什么？

P.S，2 或 3 个项目一切正常。

class BottomNavigationTabs extends StatelessWidget {
  const BottomNavigationTabs({Key? key, required this.child}) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Create'),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite), label: 'Favorite'),
          // BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'), // <-- uncomment transparent the whole bottomNavigationBar
        ],
      ),
    );
  }
}

Answer 1

像这样设置 BottomNavigationBar 的属性

fixedColor: Colors.red, //Selected Icon color. Overrides primary Color

//TextStyles
showUnselectedLabels: true,
unselectedLabelStyle:
   const TextStyle(color: Colors.grey, fontWeight: FontWeight.bold),
selectedLabelStyle:
   const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),

//Icon
unselectedIconTheme: const IconThemeData(color: Colors.grey),
selectedIconTheme: IconThemeData(color: Colors.red),

Answer 2

根据 BottomNavigationBar 文档：

The bottom navigation bar's type changes how its items are displayed. If not specified, then it's automatically set to BottomNavigationBarType.fixed when there are less than four items, and BottomNavigationBarType.shifting otherwise.

...

BottomNavigationBarType.shifting, the default when there are four or more items. If selectedItemColor is null, all items are rendered in white.

两种解决方案

1. 最简单的解决方案是将 BottomNavigationBar 类型保留为 fixed 用于三个以上的项目。

type: BottomNavigationBarType.fixed.

2. 第二个解决方案，将编辑 selectedItemColor 颜色。