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 - 预览主题始终会被覆盖。

要使预览如您所愿，您需要将 ButtonTheme 抽象到 WelcomeScreen 之外，如下所示：

@Composable
fun MyApp() {
    ...
    MyTheme {
        WelcomeScreen()
    }
}

@Composable
fun WelcomeScreen() {
    ...
    Button(...) {...}
}

@Composable
@Preview
fun MockWelcome() {
    AppTheme {
        WelcomeScreen { }
    }
}

@Composable
@Preview
fun MockDarkWelcome() {
    AppTheme(darkTheme = true) {
        WelcomeScreen { }
    }
}

Jetpack Compose 嵌套主题预览

1 个答案: