Jetpack Compose预览与真机颜色显示异常问题求助

问题根源 #

• 动态颜色（Dynamic Color）优先级高于自定义配色，即使设置dynamicColor = false，预览或部分设备仍可能强制启用
• Android Studio预览默认模拟动态颜色，覆盖自定义配色
• 三星Android 13设备存在系统层面的动态颜色强制适配逻辑

解决方案 #

1. 强制禁用动态颜色，锁定自定义配色

修改主题函数，彻底跳过动态颜色分支，强制使用自定义的配色方案：

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    // 直接使用自定义配色，完全移除动态颜色判断
    val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme
    
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

2. 修复Android Studio预览显示

在预览Composable中明确固定主题模式，避免预览自动启用动态颜色：

@Preview(showBackground = true)
@Composable
fun LoginScreenPreview() {
    AppTheme(darkTheme = false) {
        LoginScreen()
    }
}

也可以直接在预览面板设置中关闭动态颜色模拟：

• 点击预览面板右上角的「Settings」图标
• 取消勾选「Dynamic Color」选项

3. 适配三星Android 13设备

在AndroidManifest.xml的<application>标签内添加配置，强制禁用系统动态颜色：

<meta-data
    android:name="android.dynamic_color_disabled"
    android:value="true" />

同时在res/values/styles.xml中定义原生主题，同步自定义颜色：

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/bright_orange</item>
    <item name="colorSecondary">@color/dark_orange</item>
</style>

需要在res/values/colors.xml中同步定义颜色值：

<color name="bright_orange">#FF8A65</color>
<color name="dark_orange">#F57C00</color>

4. 确保UI组件正确使用自定义颜色

验证所有UI组件都通过MaterialTheme.colorScheme引用颜色，避免硬编码或使用默认Material颜色：

// 正确用法
Button(
    onClick = {},
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary
    )
) {
    Text("登录")
}

完成以上修改后，重新编译应用即可让自定义橙色在预览和三星Android 13真机上稳定显示。

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