如何为 kotlin 桌面 compose 演示项目启用 @Preview？

Question

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

我尝试在 @Composable fun 上添加 @Preview，但收到警告：未解析的参考：预览

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

        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，Build #IU-213.7172.25，构建于 2022 年 3 月 16 日。

Answer 1

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

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

之后，您可以使用预览注释，它将导入正确的库。

Answer 2

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

\n

|- sharedModule\n    |- androidMain\n    |- desktopMain\n    |- commonMain\n        |- composables\n

\n

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

\n

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

\n

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

\n

\n

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

   \n

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

   \n

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

   \n

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

   \n

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

   \n

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

   \n

   // desktopMain/previews/MyComposablePreview.kt\n\n@Composable\n@Preview\nfun MyComposablePreview() {\n    MyComposable()\n}\n

   \n

   您的文件应该如下所示。

   \n

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

   \n

   那\xe2\x80\x99就是它！希望它有帮助。

   \n
\n

\n