如何为kotlin桌面合成演示项目启用@Preview

Question

我下载了这个演示项目来学习kotlin compose。

我试图在@Composable趣味上添加@Preview，但收到警告：未解决的引用：预览

我在build.gradlw.kts:中的kotlin.sourceSets.named("CommonMain").dependencies中添加了implementation("androidx.compose.ui:ui-tooling-preview:1.1.1")

        named("commonMain") {
            dependencies {
                api(compose.runtime)
                api(compose.foundation)
                api(compose.material)
                api(compose.materialIconsExtended)
                implementation("androidx.compose.ui:ui-tooling-preview:1.1.1")
            }
        }

但仍然得到未解析的引用：预览错误。

我使用IDEA 2021.3.3，构建号IU-213.7172.25，构建于2022年3月16日。

Answer 1

您需要导入androidx.compose.desktop.ui.tooling.preview.Preview才能在桌面上预览。

转到"设置">插件>在市场上搜索Compose Multiplatform IDE Support并安装此插件。

之后，您可以使用Preview注释，它将导入正确的lib。

Answer 2

首先，我们需要理解，我们正在将commonMain中的可组合或视图创建到共享模块中。因此，我们无法向IDE指定需要预览的平台。这应该是您的文件夹结构。

|- sharedModule
    |- androidMain
    |- desktopMain
    |- commonMain
        |- composables

然后，我们需要在每个平台中创建预览，如下所示。

1. 为我们想要预览的每个sourceSet添加ui预览工具依赖项

val compose_version = "1.4.1"
val commonMain by getting {
    dependencies {
        // we don't need add anything in here
    }
}
val desktopMain by getting {
    dependencies {
        implementation("org.jetbrains.compose.ui:ui-tooling-preview:${compose_version}")
    }
}
val androidMain by getting {
    dependencies {
        implementation("org.jetbrains.compose.ui:ui-tooling-preview:${compose_version}")
    }
}

2. 将预览添加到特定的sourceSet模块中。

   我们想象我们有一个MyComposable视图。

   // commonMain/composables/MyComposable.kt
   @Composable
   fun MyComposable() {
       Text(text = "Hello there!")
   }
   

   现在，我们需要将预览创建到所需的预览sourceSet平台模块中。

   // androidMain/previews/MyComposablePreview.kt
   @Composable
   @Preview // now we are able to call the preview annotation
   fun MyComposablePreview() {
       MyComposable()
   }
   

   如果需要，我们可以为桌面添加。

   // desktopMain/previews/MyComposablePreview.kt
   @Composable
   @Preview
   fun MyComposablePreview() {
       MyComposable()
   }
   

   你的文件应该是这样的。

   |- sharedModule
       |- commonMain
           |- composables
               |- MyComposable.kt
       |- desktopMain
           |- previews
               |- MyComposablePreview.kt
       |- androidMain
           |- previews
               |- MyComposablePreview.kt
   

   就这样！希望对你有所帮助。

Answer 3

请记住，@Preview的函数不能有任何参数：

@Preview
@Composable
fun testingPreview() {
    MaterialTheme {
        Text(text = "Test")
    }
}