Jetpack Compose预览无法显示：createMdcTheme要求主题继承Theme.MaterialComponents

云原生阿岚

2026-7-24

解决Jetpack Compose预览与Splash Api主题冲突问题

问题本质

这不是Splash Api和Compose预览的兼容性问题，而是Compose预览的宿主上下文（预览用的默认Activity）继承了Splash Api设置的启动主题，而非你切换后的Theme.MaterialComponents.DayNight.NoActionBar，导致预览时无法创建符合要求的MDC主题。

具体解决办法

1. 给预览函数直接指定主题

在Compose预览注解里，通过theme参数明确指定你的MaterialComponents主题：

@Preview(
    name = "日间模式预览",
    theme = "你的应用包名.Theme.MaterialComponents.DayNight.NoActionBar"
)
@Composable
fun YourScreenPreview() {
    YourAppTheme {
        YourScreenContent()
    }
}

记得把你的应用包名替换成实际的包名，比如com.example.myapp。

2. 创建预览专用主题

在res/values/styles.xml里新增一个专门给预览用的主题，直接继承MaterialComponents：

<style name="PreviewMaterialTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- 可以按需添加预览需要的自定义样式属性 -->
</style>

之后所有预览都可以统一用这个主题：

@Preview(theme = "你的应用包名.PreviewMaterialTheme")
@Composable
fun YourScreenPreview() {
    YourAppTheme {
        YourScreenContent()
    }
}

3. 让Compose主题不依赖宿主上下文

如果你的自定义Compose主题是基于宿主上下文主题生成的，修改它直接使用Compose的MaterialTheme，脱离对宿主主题的依赖：

@Composable
fun YourAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        DarkColorScheme
    } else {
        LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = AppTypography,
        content = content
    )
}

这样不管预览宿主的主题是什么，Compose自己的主题都能正常渲染。