Flutter BottomNavBarItem未选中时Label不显示问题求助

针对你遇到的未选中状态下Label不显示的问题，给你几个直接可行的调整方案：

1. 显式开启未选中Label显示 #

BottomNavigationBar默认在item数量≥4时（默认类型为shifting），会隐藏未选中的Label。你只需要在BottomNavigationBar中添加showUnselectedLabels: true属性，强制显示所有状态的Label：

bottomNavigationBar: BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    _genNavItem(0, 'a'),
    _genNavItem(1, 'b'),
    _genNavItem(2, 'c'),
    _genNavItem(3, 'd'),
  ],
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  currentIndex: _currentIndex,
  showUnselectedLabels: true, // 新增这一行
),

2. 明确设置未选中Label的颜色 #

如果开启显示后还是看不见，大概率是未选中Label的颜色和背景色过于接近。可以通过unselectedItemColor设置一个与matGreen对比明显的颜色：

bottomNavigationBar: BottomNavigationBar(
  // ... 其他属性
  showUnselectedLabels: true,
  unselectedItemColor: Colors.grey, // 比如设置为灰色
  selectedItemColor: Colors.white, // 保持选中时的白色
),

3. 切换BottomNavigationBar的类型为fixed #

默认的shifting类型在多item场景下可能存在样式冲突，显式设置type: BottomNavigationBarType.fixed能让样式表现更稳定，配合上述属性一起使用：

bottomNavigationBar: BottomNavigationBar(
  // ... 其他属性
  type: BottomNavigationBarType.fixed,
  showUnselectedLabels: true,
  unselectedItemColor: Colors.grey,
  selectedItemColor: Colors.white,
),

4. 统一设置导航栏背景色 #

你给每个BottomNavigationBarItem单独设置了backgroundColor: matGreen，在shifting类型下可能导致未选中Label被遮挡。可以移除item中的背景色设置，统一在BottomNavigationBar上配置：

// 修改_genNavItem方法，移除item内的backgroundColor
BottomNavigationBarItem _genNavItem(
  int iconIndex, 
  String title,
) => BottomNavigationBarItem(
  icon: Icon(
    _icons[iconIndex],
    size: 35.0, 
  ),
  label: title,
);

// 在BottomNavigationBar中设置统一背景色
bottomNavigationBar: BottomNavigationBar(
  // ... 其他属性
  backgroundColor: matGreen,
),

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