Jetpack撰写嵌套主题预览

Question

让我们考虑以下@Composable函数:

@Composable
fun WelcomeScreen() {
...
ButtonTheme {
Button(...) {...}
}
}
@Composable
@Preview
fun MockWelcome() {
AppTheme {
WelcomeScreen { }
}
}
@Composable
@Preview
fun MockDarkWelcome() {
AppTheme(darkTheme = true) {
WelcomeScreen { }
}
}

和主题(注:)AppTheme遵循相同的逻辑):

@Composable
fun ButtonTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
MaterialTheme(
...
colors = if (darkTheme) darkButtonColorPalette else lightButtonColorPalette,
)
}

预览窗口将正确显示两个WelcomeScreen版本，但黑暗版本将不显示黑暗主题中的按钮。
应用程序运行一切正常，这只是一个预览"问题"

所以，我的问题是:这是预期的行为，一个错误，还是一个错误的配置?

完整代码在这里:https://github.com/GuilhE/JetpackChallenge

Answer 1

如果你把预览和屏幕连接在一起，你就会得到这样的效果:

AppTheme(darkTheme = true) {
ButtonTheme {
Button(...) {...}
}
}

所以无论你在预览中使用什么主题，ButtonTheme将始终被使用-预览主题总是被覆盖。

为了使预览工作如你所愿，你需要在WelcomeScreen之外抽象ButtonTheme，所以像这样:

@Composable
fun MyApp() {
...
MyTheme {
WelcomeScreen()
}
}
@Composable
fun WelcomeScreen() {
...
Button(...) {...}
}
@Composable
@Preview
fun MockWelcome() {
AppTheme {
WelcomeScreen { }
}
}
@Composable
@Preview
fun MockDarkWelcome() {
AppTheme(darkTheme = true) {
WelcomeScreen { }
}
}