Jetpack Compose 预览未显示

Question

我似乎在撰写时遇到了预览问题，当我使用 @preview 注释撰写方法时，布局面板没有出现。 我假设我缺少一个依赖项，但我已经从这里https://developer.android.com/jetpack/compose/setup复制并粘贴了代码。 有什么建议么？ （尝试了通常的清除缓存，重新打开项目等）:)

buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.0.0-alpha10'
        kotlinCompilerVersion '1.4.21'
    }
}

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-alpha10'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-alpha10'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha10'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-alpha10'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha10'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha10'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha10'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha10'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-alpha10'

    implementation 'com.google.android.material:material:1.2.1'
}

这是我使用预览的尝试（在 AS 中它说 Function "DefaultPreview" 从未使用过）

import androidx.compose.ui.tooling.preview.Preview
.....
@Preview
@Composable
fun DefaultPreview() {
    Text(text = "Hello!")
}

Answer 1

    buildFeatures {
        compose true
    }

在 build.gradle 文件的 Android 块中写入上述代码。 你的问题就会得到解决。

Answer 2

如果其他人遇到与我相同的问题，我将保留它（这是用户错误，但我也认为文档可能更清晰）。

Android Canary 有两个版本，beta 和 arctic fox (alpha)。 如果您想使用最新版本的 compose 库，请确保您使用的是 arctic fox。 我发现 compose 库'androidx.compose.ui:ui-tooling:1.0.0-alpha08' （及更高版本）在 Canary 的 beta 版本中不能很好地工作。

Answer 3

我想你可以在配置中找到你想要的东西

Answer 4

对我来说，我在模块的 gradle 中又错过了一个依赖项

debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"

https://developer.android.com/jetpack/compose/tooling

Answer 5

更新到最新版本的 AS 解决了我的错误。

从这里尝试最新版本https://developer.android.com/studio/preview

Answer 6

对我来说，这是某种混合物

1. 确保您拥有最新的 Android Studio 版本
2. 在 project/build.gradle 中确保你有

dependencies { classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.20' }

3. 在 app/build.gradle 中确保你有

android { composeOptions { kotlinCompilerExtensionVersion'1.1.1' } buildFeatures { compose true } } dependencies { implementation("androidx.compose.ui:ui:1.1.1") // Tooling support (Previews, etc.) debugImplementation "androidx.compose.ui:ui-tooling:1.1.1" implementation "androidx.compose.ui:ui-tooling-preview:1.1.1" // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.) implementation("androidx.compose.foundation:foundation:1.1.1") // Material Design implementation("androidx.compose.material:material:1.1.1") // Material design icons implementation("androidx.compose.material:material-icons-core:1.1.1") implementation("androidx.compose.material:material-icons-extended:1.1.1") // Integration with observables implementation("androidx.compose.runtime:runtime-livedata:1.1.1") implementation("androidx.compose.runtime:runtime-rxjava2:1.1.1") }

4. 文件 -> 使 Ccaches 无效并重新启动
5. 运行一次项目

非常重要：检查正确的 @Preview 导入 - 应该是：

导入 androidx.compose.ui.tooling.preview.Preview

例子：

 @Composable fun SimpleComposable() { Text("Hello World") } @Preview @Composable fun ComposablePreview() { SimpleComposable() }

@Preview function 应该没有参数。

Answer 7

Jetpack Compose (rc01, rc02) 与@Preview存在问题。 您可以通过在 build.gradle 文件中添加以下代码来解决它：

android {
   ...
}

configurations.all {
    resolutionStrategy {
        force("androidx.compose.ui:ui-tooling:1.0.0-beta09")
        force("androidx.compose.ui:ui-tooling-data:1.0.0-beta09")
        force("androidx.compose.ui:ui-tooling-preview:1.0.0-beta09")
    }
}

dependencies {
   ...
}

示例： https://github.com/AlexZhukovich/ComposePlayground/blob/main/app/build.gradle

Answer 8

我不得不添加

debugImplementation 'androidx.customview:customview-poolingcontainer:1.0.0-rc01'
debugImplementation 'androidx.customview:customview:1.1.0'

资源

Answer 9

对我来说，我的 gradle 文件中没有以下内容：

composeOptions {
    kotlinCompilerExtensionVersion '1.0.3'
}

和

buildFeatures {
   compose true
}

Answer 10

在项目的 build.gradle 中指定：

dependencies {
            classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.30"
        }

Answer 11

如果错过任何依赖项，这对我有用

在新的 AS compose 运行时丢失并且可能移动到其他东西并在添加这些工具时从顶部添加了 UI 工具，工作室开始使用预览。

implementation("androidx.compose.runtime:runtime:1.2.0")
implementation("androidx.compose.ui:ui-tooling:1.2.0")

全部一起

implementation("androidx.activity:activity-compose:1.5.1")
implementation("androidx.compose.ui:ui:1.2.0")
implementation("androidx.compose.runtime:runtime:1.2.0")
implementation("androidx.compose.ui:ui-tooling-preview:1.2.0")
implementation("androidx.compose.ui:ui-tooling:1.2.0")