logo标签列表

Jetpack Compose 预览未显示

androidandroid-jetpack-compose
30

我似乎在Compose中的Preview有些问题，当我在compose方法上使用@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!")
}
你好，你有找到解决这个问题的方法吗？我尝试了很多方法，但都没有成功。 - Suj
对我来说，问题是更新到"androidx.compose.ui:ui-tooling-preview:1.2.0-alpha02"，尽管我已经设置了buildFeatures。 - Rafael
你能否尝试添加下面这个依赖项？我长期以来一直面临这个问题，但这个依赖项神奇地解决了它，虽然我不确定它为什么是必需的。implementation("androidx.activity:activity-compose:1.3.1") - prateek
14个回答
38
    buildFeatures {
        compose true
    }

将上述代码写在build.gradle文件中的Android块内，然后您的问题就会得到解决。

2
这就是我在项目中所缺少的。Compose文件右上角的选项（代码/分割/设计）直到我添加了这个才显示出来。 - hellaandrew
build.gradle（模块：your_project_name.app） - Stevo
非常感谢，非常出色。 - mohamadreza navab
谢谢，我也是这样的情况！这是因为我为我的组合件创建了一个单独的非应用Gradle模块。如果你也这样做了，请不要忘记在模块的构建文件中添加必要的依赖和选项！ - Arthur Khazbs
14
9

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

  1. 确保你有最新的Android Studio版本
  2. 在工程目录下的build.gradle文件中确认你拥有以下配置
dependencies {
  classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.20' 
}
  1. 在 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")
}
  1. 文件 -> 无效化 Ccaches 并重新启动
  2. 运行项目一次

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

import androidx.compose.ui.tooling.preview.Preview

示例：

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

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

@预览功能不应该带有参数。

3
对我来说，这是“清除缓存并重启”。 - arekolek
最后一句话应该是粗体字，并置于顶部。 - t3chb0t
6

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

Android Canary有两个版本，beta版和北极狐（alpha版）。如果你想使用最新版本的组合库，请确保你正在使用北极狐。我发现，'androidx.compose.ui:ui-tooling:1.0.0-alpha08'（及更高版本）与Canary的beta版本不太兼容。

6

我认为您可以在配置中找到您想要的东西。 这里输入图片描述

我已经启用了这些，但是禁用再重新启用就解决了我的问题。 - Matt Robertson
主题是什么？ - Amit Jayant
1
@AmitJayant 我购买了 Material Design 的付费版本并进行了定制。 - MJ Studio
2
我已将版本更新至最新的1.0.5，但它无法正常工作。我降级到1.0.1，它可以正常工作。在他们修复之前，请使用旧的合成版本1.0.1。 - Vasudev Vyas
2

关于 Jetpack Compose Tooling的 Android 开发者网站：

为了启用 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"
1

我必须添加

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

Source

1

这是对我有用的方法，如果缺少任何依赖项，请添加它们：

在新的AS Compose运行时中，可能会缺少并且已经移动到其他地方，并在顶部添加了UI工具，当这些工具被添加后，Studio开始可以使用预览功能。

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接