Jetpack Compose 嵌套主题预览答案

【问题标题】：Jetpack Compose nested theming previewJetpack Compose 嵌套主题预览
【发布时间】：2021-03-02 15:23:34
【问题描述】：

让我们考虑以下@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

【问题讨论】：

您的代码应该可以正常工作。你能分享一个可重现的例子吗？
@Yannick 用链接更新了我的问题
我的预览什么也没显示。预览版仍然非常不可靠（Android Studio 仍然是金丝雀版本）。我尽量避免预览，我宁愿使用 Showkase github.com/airbnb/Showkase

标签： android kotlin android-jetpack-compose android-jetpack-compose-preview

【解决方案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 { }
    }
}

【讨论】：