Android Jetpack Compose 预览 UI_MODE_NIGHT_YES 在预览中不显示深色背景

Question

我正在关注https://developer.android.com/jetpack/compose/tutorial

和代码

@Preview(name = "Light Mode")
@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_UNDEFINED, showBackground = true)
@Preview(name = "Full Preview", showSystemUi = true)
@Composable
fun DefaultPreview() {
    ComposeTutorialTheme {
        MessageCard(Message("Roman", "message body"))
    }
}

Answer 1

它在教程中“有效”，因为他们使用了一个在引擎盖下Card使用的。Surface

您看到的深色背景不是由@Preview注释生成的，而是由Surface简单地根据MaterialTheme.

准系统实施Surface：

fun Surface(
    color: Color = MaterialTheme.colorScheme.surface,
) {
    Box(
        modifier = modifier.surface(
            backgroundColor = color
        ),
    ) {
        ...
    }
}

Surface还覆盖“内容颜色”

CompositionLocalProvider(
    LocalContentColor provides contentColorFor(color),
) {
    content()
}

以便其中显示的文本或图标Surface与背景颜色形成良好的对比。

您仍然需要设置MaterialTheme以遵循黑暗主题。最后，预览可组合项看起来像这样：

@Preview
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun BannerPreview() {
    PlaygroundTheme {
        Surface {
            Banner()
        }
    }
}

Card以下是当您忘记使用/Surface或不应用isSystemInDarkTheme()-aware时预览的外观比较MaterialTheme：