求助：使用Jetpack Compose开发类三星时钟App的配色及动态色彩实现

一、先搞定动态色彩基础配置 #

首先确保你的项目依赖了Material 3库，然后在主题中启用动态色彩适配Android 12+的系统主题色：

// build.gradle.kts 依赖配置
dependencies {
    implementation("androidx.compose.material3:material3:1.2.0")
    implementation("androidx.core:core-ktx:1.12.0")
}

@Composable
fun ClockAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

二、对应三星时钟的M3色彩角色映射 #

结合三星时钟的UI风格，把M3色彩角色对应到具体元素：

• 主时钟数字：亮态用colorScheme.onSurface，暗态用colorScheme.onSurfaceVariant
• 时间标识（AM/PM）、选中态导航项：用colorScheme.primary
• 未选中导航项、次要文本：用colorScheme.onSurfaceVariant
• 卡片背景：亮态colorScheme.surface，暗态colorScheme.surfaceVariant
• 操作按钮（如添加闹钟FAB）：背景colorScheme.primary，图标colorScheme.onPrimary

示例：主时钟显示组件

@Composable
fun MainClockDisplay() {
    val colorScheme = MaterialTheme.colorScheme
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "12:34",
            style = MaterialTheme.typography.displayLarge,
            color = colorScheme.onSurface
        )
        Text(
            text = "PM",
            style = MaterialTheme.typography.titleMedium,
            color = colorScheme.primary,
            modifier = Modifier.padding(top = 8.dp)
        )
    }
}

三、自定义动态色彩贴合三星风格 #

如果系统提取的动态色不符合三星时钟的蓝紫色调倾向，可以扩展动态色彩方案：

@Composable
fun SamsungLikeDynamicDarkColorScheme(context: Context): ColorScheme {
    val baseScheme = dynamicDarkColorScheme(context)
    return baseScheme.copy(
        primary = Color(0xFF6366F1), // 三星时钟常用蓝紫色
        onPrimary = Color.White,
        secondary = baseScheme.secondary.copy(alpha = 0.8f)
    )
}

// 在Theme中替换原动态色彩方案
val colorScheme = when {
    dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
        val context = LocalContext.current
        if (darkTheme) SamsungLikeDynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
    }
    // ...其余逻辑不变
}

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