如何为Kotlin桌面Compose示例项目启用@Preview注解？

数据老陈

2026-8-25

解决Compose-JB中@Preview注解无法解析的问题

核心原因

你在跨平台Compose的commonMain源集里添加了Android专属的ui-tooling-preview依赖，但@Preview是Android Compose工具链的专属注解，跨平台公共模块（common）无法直接使用；同时Compose for Desktop的预览机制和Android完全不同，不能直接复用Android的预览依赖。

具体解决方案

针对Android平台的预览配置

将ui-tooling-preview依赖从commonMain移到androidMain源集，同时补充ui-tooling的debug依赖：

named("androidMain") {
    dependencies {
        // 保留原有Android相关依赖
        implementation("androidx.compose.ui:ui-tooling-preview:1.1.1")
        debugImplementation("androidx.compose.ui:ui-tooling:1.1.1")
    }
}

在androidMain目录下的Composable函数上添加@Preview注解，或者在common模块的Composable中通过expect/actual机制适配预览逻辑。

针对Desktop平台的预览配置

Compose for Desktop不需要Android的ui-tooling-preview依赖，有两种预览方式：

直接编写启动入口预览：

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        // 填入你要预览的Composable组件，比如示例中的CodeViewer
        CodeViewer()
    }
}