Android Kotlin如何自定义Material Theme 3的NavigationBarItemColors

问题说明 #

尝试修改Material Theme 3底部导航栏项颜色时，直接实例化NavigationBarItemColors会报错：

val myNavigationBarItemColors: NavigationBarItemColors = NavigationBarItemColors(
// 报错：Cannot access '<init>': it is internal in 'NavigationBarItemColors'
)

原因是NavigationBarItemColors的构造函数被标记为internal，无法直接创建实例，必须使用官方提供的合法API来自定义颜色。

解决方法 #

1. 使用官方构建器函数navigationBarItemColors()

这是最直接的方式，通过顶层构建器函数创建NavigationBarItemColors实例，自定义选中/未选中状态的图标、文本及指示器颜色：

val customNavItemColors = navigationBarItemColors(
    selectedIconColor = Color(0xFFD32F2F), // 选中态图标颜色
    selectedTextColor = Color(0xFFD32F2F), // 选中态文本颜色
    unselectedIconColor = Color(0xFF757575), // 未选中态图标颜色
    unselectedTextColor = Color(0xFF757575), // 未选中态文本颜色
    indicatorColor = Color(0x20D32F2F) // 选中项背景指示器颜色
)

// 在NavigationBar中使用
NavigationBar(
    itemColors = customNavItemColors,
    modifier = Modifier.fillMaxWidth()
) {
    NavigationBarItem(
        selected = selectedTab == 0,
        onClick = { selectedTab = 0 },
        icon = { Icon(Icons.Filled.Home, contentDescription = "首页") },
        label = { Text("首页") }
    )
    // 其他导航项...
}

2. 全局主题中统一配置

如果希望整个App的导航栏颜色风格统一，可以在自定义Material Theme中基于主题色配置导航栏项颜色：

// 自定义颜色方案
private val AppDarkColorScheme = darkColorScheme(
    primary = Color(0xFFD32F2F),
    onPrimary = Color.White,
    surfaceVariant = Color(0xFF424242),
    onSurfaceVariant = Color(0xFFEEEEEE)
)

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) AppDarkColorScheme else lightColorScheme()
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

// 使用主题色配置导航栏
NavigationBar(
    itemColors = navigationBarItemColors(
        selectedIconColor = MaterialTheme.colorScheme.primary,
        selectedTextColor = MaterialTheme.colorScheme.primary,
        unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f),
        unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
    )
) {
    // 导航项...
}

3. 单独配置单个导航项

如果需要给特定导航项设置差异化颜色，可以直接在NavigationBarItem中覆盖颜色参数：

NavigationBarItem(
    selected = selectedTab == 1,
    onClick = { selectedTab = 1 },
    icon = { Icon(Icons.Filled.Favorite, contentDescription = "收藏") },
    label = { Text("收藏") },
    selectedIconColor = Color(0xFFE91E63),
    unselectedIconColor = Color(0xFFBDBDBD),
    selectedTextColor = Color(0xFFE91E63),
    unselectedTextColor = Color(0xFFBDBDBD)
)

内容的提问来源于stack exchange，提问作者Basil the dev