Jetpack Compose 预览未显示

Question

我似乎在 compose 中使用 Preview 时遇到问题，当我使用 @preview 注释 compose 方法时，布局面板没有出现。我假设我缺少一个依赖项，但我已经从这里复制并粘贴了代码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

对我来说这是某种混合物

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. 文件 -> 使 Ccache 无效并重新启动
5. 运行项目一次

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

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

例子：

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

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

@Preview 函数应该没有参数。

Answer 4

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

Answer 5

如果其他人遇到和我一样的问题（这是用户错误，但我也认为文档可能会更清楚），我将保留这一点。

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