Flutter中Scaffold组件内底部导航栏标签文字颜色无法修改问题求助

这个问题我之前也碰到过！原因很简单：BottomNavigationBar的selectedItemColor属性优先级比selectedLabelStyle里的color更高。默认情况下，selectedItemColor会使用主题的primaryColor（也就是你看到的蓝色），所以哪怕你在selectedLabelStyle里指定了文字颜色，也会被它覆盖掉。

下面给你两种常用的解决方式：

方法一：直接设置selectedItemColor（最简单） #

如果你希望选中状态下的图标和文字颜色保持一致，直接给BottomNavigationBar加上selectedItemColor属性就行，同时保留你设置的字体大小和粗细：

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _selectedIndex, // 你的选中索引变量
    selectedItemColor: Colors.black, // 这里设置选中项的颜色（图标+文字）
    selectedLabelStyle: const TextStyle(
      fontSize: 25,
      fontWeight: FontWeight.bold,
      // 这里可以不用再设置color了，selectedItemColor会统一控制
    ),
    unselectedLabelStyle: const TextStyle(
      fontSize: 16, // 可选：设置未选中状态的字体样式
    ),
    unselectedItemColor: Colors.grey, // 可选：设置未选中项的颜色
    onTap: (index) {
      setState(() {
        _selectedIndex = index;
      });
    },
    items: const [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: "首页",
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: "设置",
      ),
    ],
  ),
)

方法二：单独控制文字与图标颜色（进阶需求） #

如果你想要选中时文字和图标颜色不一样（比如图标红色，文字黑色），可以用Flutter 3.3+新增的labelWidget属性来自定义标签，结合当前选中索引来判断样式：

int _selectedIndex = 0; // 你的选中索引变量

// ...

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.red, // 选中时的图标颜色
    unselectedItemColor: Colors.grey, // 未选中时的图标颜色
    onTap: (index) {
      setState(() {
        _selectedIndex = index;
      });
    },
    items: [
      BottomNavigationBarItem(
        icon: const Icon(Icons.home),
        label: '', // 留空，用labelWidget替代
        labelWidget: Text(
          "首页",
          style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.bold,
            color: _selectedIndex == 0 ? Colors.black : Colors.grey,
          ),
        ),
      ),
      BottomNavigationBarItem(
        icon: const Icon(Icons.settings),
        label: '',
        labelWidget: Text(
          "设置",
          style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.bold,
            color: _selectedIndex == 1 ? Colors.black : Colors.grey,
          ),
        ),
      ),
    ],
  ),
)

如果你的Flutter版本低于3.3，也可以把label换成自定义的Text组件，逻辑是一样的：

BottomNavigationBarItem(
  icon: const Icon(Icons.home),
  label: "",
  title: Text( // 注意：title是旧属性，新版本推荐用labelWidget
    "首页",
    style: TextStyle(
      fontSize: 25,
      fontWeight: FontWeight.bold,
      color: _selectedIndex == 0 ? Colors.black : Colors.grey,
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Naim Hasan Pappu