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

Question

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

这是为什么？

PS，只要有 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文档：

底部导航栏的类型会更改其项目的显示方式。如果未指定，则当项目少于四个时，它会自动设置为 BottomNavigationBarType.fixed ，否则 自动设置为BottomNavigationBarType.shifting。

...

BottomNavigationBarType.shifting，有四个或更多项目时的默认值。如果 selectedItemColor 为 null，则所有项目都呈现为白色。

两种解决方案

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

type: BottomNavigationBarType.fixed。

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