Flutter：BottomNavigationBar选中项颜色不随明暗主题切换求助

开发者阿泽

2026-7-22

解决BottomNavigationBar选中项颜色随主题切换失效的问题

问题核心&修复思路

你写的selectedItemColor: Get.isDarkMode ? Colors.white : Colors.black逻辑本身没问题，但因为BottomNavigationBar没有监听GetX的主题状态变化，导致主题切换时组件没触发重建，颜色也就不会更新。

具体解决步骤

用Ob包裹BottomNavigationBar
把BottomNavigationBar放在Ob(() => ...)内部，让GetX自动监听主题状态变化并重建组件：

Ob(() => BottomNavigationBar(
      selectedItemColor: Get.isDarkMode ? Colors.white : Colors.black,
      unselectedItemColor: // 你的未选中颜色配置
      currentIndex: _selectedIndex,
      onTap: _onItemTapped,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
      ],
    )),

确认主题切换方式正确
确保你是用GetX官方方法触发主题切换，而不是手动修改变量：

// 切换主题的示例方法
void toggleTheme() {
  Get.changeThemeMode(Get.isDarkMode ? ThemeMode.light : ThemeMode.dark);
}

检查根组件的主题配置
确认GetMaterialApp的light/dark主题已正确设置：

GetMaterialApp(
  theme: ThemeData(brightness: Brightness.light),
  darkTheme: ThemeData(brightness: Brightness.dark),
  themeMode: ThemeMode.system, // 可根据需求设置为light/dark/system
  home: YourHomePage(),
)

备选方案：用GetBuilder监听
如果Ob不生效，可通过GetBuilder手动绑定主题状态：

GetBuilder(
  builder: (_) {
    return BottomNavigationBar(
      selectedItemColor: Get.isDarkMode ? Colors.white : Colors.black,
      // 其他配置项
    );
  },
)