1

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

4

1 回答 1

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 { }
    }
}
于 2021-03-02T22:56:18.417 回答