Jetpack Compose中BottomNavigationItem选中/未选中内容颜色不生效

你设置的contentColor、selectedContentColor和unselectedContentColor未生效，核心原因是Compose的BottomNavigationItem默认会继承全局主题中BottomNavigation的样式配置，直接传参的优先级低于主题样式，导致自定义颜色被覆盖。

下面提供两种可行的解决方式：

方式一：手动给图标和文本设置颜色（局部生效） #

直接绕过主题限制，根据选中状态给Icon和Text单独设置颜色，代码修改如下：

@Composable
fun BottomNavigationBar(navController: NavController) {
    val items = listOf(
        BottomNavigationItem.One,
        BottomNavigationItem.Two,
        BottomNavigationItem.Three,
        BottomNavigationItem.Four,
        BottomNavigationItem.Five
    )
    BottomNavigation(
        backgroundColor = colorResource(id = R.color.teal_700)
    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.forEach { item ->
            val isSelected = currentRoute == item.route
            BottomNavigationItem(
                icon = { 
                    Icon(
                        painterResource(id = item.icon), 
                        contentDescription = item.title,
                        tint = if (isSelected) Color.White else Color.White.copy(0.4f)
                    ) 
                },
                label = { 
                    Text(
                        text = item.title,
                        color = if (isSelected) Color.White else Color.White.copy(0.4f)
                    ) 
                },
                alwaysShowLabel = true,
                selected = isSelected,
                onClick = {
                    navController.navigate(item.route) {
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route) {
                                saveState = true
                            }
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    }
}

方式二：修改全局主题配置（全局生效） #

如果希望所有BottomNavigation都统一这个颜色样式，可以在App主题中配置bottomNavigation的颜色参数（以Material 3为例，根据你的主题类型调整）：

private val AppTheme = darkTheme(
    colorScheme = darkColorScheme(),
    components = {
        bottomNavigationColors(
            containerColor = colorResource(id = R.color.teal_700),
            selectedContentColor = Color.White,
            unselectedContentColor = Color.White.copy(0.4f)
        )
    }
)

配置后，BottomNavigation和BottomNavigationItem会自动应用主题中的颜色，无需再单独传参。

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