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 中它说函数“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

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

debugImplementation“androidx.compose.ui：ui-tooling：$ compose_version”

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

Answer 3

对我来说这是某种混合物

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

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

在 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")
}

文件 -> 使 Ccache 无效并重新启动
运行项目一次

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

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

示例：

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

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

@Preview 函数应该没有参数。

Answer 4

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

Android Canary 有两个版本：beta 和 Arctic Fox（alpha）。如果您想使用最新版本的 compose 库，请确保您使用的是 Arctic Fox。我发现 compose 库

'androidx.compose.ui:ui-tooling:1.0.0-alpha08'

（及更高版本）与 Canary 测试版配合得不太好。

Answer 5

6
投票

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

Answer 6

来自 Android 开发者网站关于 Jetpack Compose 工具：

要为 Jetpack Compose 启用 Android Studio 特定功能，您需要在应用程序 build.gradle 文件中添加这些依赖项：

debugImplementation "androidx.compose.ui:ui-tooling:1.4.2"
implementation "androidx.compose.ui:ui-tooling-preview:1.4.2"

Answer 7

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

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

Answer 8

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 9

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

composeOptions {
    kotlinCompilerExtensionVersion '1.0.3'
}

和

buildFeatures {
   compose true
}

Answer 10

我必须补充一下

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

来源

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")

Answer 12

在项目的 build.gradle 中指定：

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

Answer 13

我遇到了同样的问题，并且也遇到了一些编译问题。我的结论是，您需要一个良好的“可变版本”模式，例如，对于某些依赖项使用相同的版本很重要，例如 Kotlin 版本。

我做了类似这个项目的事情：Jetpack Compose Navigation

他们使用版本变量的全局定义，如下所示：

buildscript {
    ext {
        // Sdk and tools
        compileSdkVersion = 33
        minSdkVersion = 21
        targetSdkVersion = 32

        // App dependencies
        appCompatVersion = '1.5.1'
        activityComposeVersion = '1.6.0'
        composeCompilerVersion = "1.3.0"
        composeVersion = '1.2.1'
        coreTestingVersion = '2.1.0'
        espressoVersion = '3.4.0'
        gradleVersion = '7.2.2'
        kotlinVersion = '1.7.10'
        ktlintVersion = '0.45.2'
        ktxVersion = '1.9.0'
        materialVersion = '1.6.1'
        navigationComposeVersion = '2.5.2'
    }
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
    dependencies {
        classpath "com.android.tools.build:gradle:$gradleVersion"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
        classpath 'com.google.gms:google-services:4.3.14'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.2'
    }
}

然后也在您的应用程序 build.gradle 中使用它：

dependencies {

    implementation project(path: ':libtoolscommon')

    implementation "androidx.appcompat:appcompat:$rootProject.appCompatVersion"
    implementation "androidx.core:core-ktx:$rootProject.ktxVersion"
    implementation "com.google.android.material:material:$rootProject.materialVersion"
    implementation 'androidx.preference:preference-ktx:1.2.0'

    // Compose
    implementation "androidx.compose.runtime:runtime:$rootProject.composeVersion"
    implementation "androidx.compose.ui:ui:$rootProject.composeVersion"
    implementation "androidx.compose.foundation:foundation:$rootProject.composeVersion"
    implementation "androidx.compose.material:material:$rootProject.composeVersion"
    implementation "androidx.compose.material:material-icons-extended:$rootProject.composeVersion"
    implementation "androidx.activity:activity-compose:$rootProject.activityComposeVersion"
    implementation "androidx.navigation:navigation-compose:$rootProject.navigationComposeVersion"
    debugImplementation "androidx.compose.ui:ui-tooling:$rootProject.composeVersion"

    // Testing dependencies
    androidTestImplementation "androidx.arch.core:core-testing:$rootProject.coreTestingVersion"
    androidTestImplementation "androidx.test.espresso:espresso-contrib:$rootProject.espressoVersion"
    androidTestImplementation "androidx.test.espresso:espresso-core:$rootProject.espressoVersion"

    // Compose testing dependencies
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$rootProject.composeVersion"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$rootProject.composeVersion"

    implementation "androidx.compose.material3:material3:1.0.0-beta03"
    implementation "androidx.compose.material3:material3-window-size-class:1.0.0-beta03"
    implementation 'androidx.window:window:1.1.0-alpha03'

   ---
}

并尝试使用该库的最新版本。

如果你有一个用 Kotlin 编写的整个项目，它应该是这样的：

    implementation(libs.androidx.core.ktx)
    implementation(libs.kotlin.stdlib)
    implementation(libs.kotlinx.coroutines.android)

    implementation(libs.androidx.compose.ui.tooling.preview)
    debugImplementation(libs.androidx.compose.ui.tooling)
    implementation(libs.androidx.compose.materialWindow)
    implementation(libs.androidx.compose.material.iconsExtended)

    implementation(libs.androidx.lifecycle.runtime)
    implementation(libs.androidx.lifecycle.viewModelCompose)
    implementation(libs.androidx.navigation.compose)

    implementation(libs.androidx.activity.compose)
    implementation(libs.androidx.window)

Answer 14

我在Android Studio考拉，我也遇到了同样的问题，所以我先清除了本地C盘，然后我做了无效缓存并重新启动。文件 -> 使缓存无效并重新启动

Answer 15

期望它在构建后以“拆分”或“设计”模式显示。（不像教程中那样正确地处理代码。）

Jetpack Compose 预览未显示

问题描述投票：0回答：15

15个回答

最新问题

Jetpack Compose 预览未显示

问题描述 投票：0回答：15

15个回答

最新问题

问题描述投票：0回答：15