Jetpack Compose中BottomNavigationItem不适配Material 3主题问题

1. 确认选中状态是否正确绑定 #

这是最常见的问题——你得确保BottomNavigationItem的selected参数和当前导航路由绑定，否则组件无法识别选中项。示例代码：

val navController = rememberNavController()
// 定义你的导航项列表
val navItems = listOf(
    NavItem.Home,
    NavItem.Profile,
    NavItem.Settings
)
// 获取当前活跃的路由
val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route

BottomNavigation(backgroundColor = MaterialTheme.colorScheme.background) {
    navItems.forEach { item ->
        BottomNavigationItem(
            icon = { Icon(item.icon, contentDescription = item.label) },
            label = { Text(item.label) },
            // 关键：用当前路由判断是否选中
            selected = currentRoute == item.route,
            onClick = {
                navController.navigate(item.route) {
                    // 优化导航行为，避免重复入栈
                    popUpTo(navController.graph.startDestinationId) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            }
        )
    }
}

2. 检查Material 3主题颜色配置 #

Material 3的BottomNavigationItem默认用colorScheme.primary作为选中时的图标/文字颜色，如果主题中primary与背景色对比度太低，会看起来没高亮。可以通过两种方式调整：

方式一：全局主题配置

在Material 3主题中统一设置BottomNavigation样式：

MaterialTheme(
    colorScheme = yourColorScheme,
    typography = Typography,
    components = {
        BottomNavigationDefaults(
            colors = BottomNavigationColors(
                selectedItemColor = yourColorScheme.primary,
                unselectedItemColor = yourColorScheme.onSurfaceVariant,
                // 选中项底部的指示器颜色，Material 3默认自带该指示器
                indicatorColor = yourColorScheme.primaryContainer
            )
        )
    }
) {
    // 应用内容
}

方式二：单独配置单个BottomNavigationItem

如果只想给某一处底部导航自定义样式，直接在组件内指定颜色：

BottomNavigationItem(
    // 其他参数
    selectedContentColor = MaterialTheme.colorScheme.primary,
    unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
    // 自定义指示器样式（可选）
    indicator = {
        BottomNavigationDefaults.ItemIndicator(
            color = MaterialTheme.colorScheme.primaryContainer
        )
    }
)

3. 验证依赖版本是否为稳定版 #

旧版本的Material 3或Navigation Compose可能存在组件样式bug，确保依赖为最新稳定版：

// build.gradle.kts 或 build.gradle
implementation "androidx.compose.material3:material3:1.2.1"
implementation "androidx.navigation:navigation-compose:2.7.7"

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