Jetpack Compose 实时预览

Question

我刚开始研究 Jetpack Compose 并下载了 Jetnews 的示例。

当我打开 MainActivity 或 JetnewsApp.kt 时，我无法看到 Composable 函数的预览，我添加了 @Preview 也有注释，但无法看到实时预览。

谁能帮我找到实时预览。
提前致谢。

Answer 1

更新：

在此之前，我们必须在 JetnewsApp 上添加 @Preview 才能预览。

@Preview
@Composable
fun JetnewsApp() { ... }

您只需勾选 "Show Decorations" 选项即可显示真实布局预览。

您可以使用相同的选项切换两个预览。

查看下图：

更新二：

也使 Android Studio 失效并重新启动，如果它一开始不起作用。请记住，这仍在开发中。

Answer 2

在JetnewsApp中，SelectTopicButton.kt只有@Preview()个标签。当在任何文件中我们有 @Preview() 时，它会自动在右侧显示预览。

在显示装饰 模式下，您可以预览带有移动图像的项目，它在屏幕上的外观。

要获得实时预览，我们需要在 @Composable 标签之前添加 @Preview 标签，并且乐趣必须要渲染。

我曾尝试在 JetnewsApp.kt 中添加 @Preview() 和 @Preview("MyScreen preview")，它显示了预览。

Answer 3

如果在 JetnewsApp class 中添加 @Preview 注释后您的预览从未显示。在我的情况下，添加 @Preview 后我关闭项目然后再次打开项目它在 Macbook pro 中对我来说工作正常。

Answer 4

顺便说一句，目前 @Preview 仅适用于 @Composable 函数没有参数。所以请再次检查您的可组合函数

Answer 5

我遇到了类似的问题，预览无法显示。问题是我也在函数中调用了 setContent 。删除它并重新生成按预期呈现的预览。

所以

    @Preview(showBackground = true, widthDp = 320)
    @Composable
    fun PreviewMainScreen() {
        setContent {
            Greeting()
        }
    }

会失败并且

    @Preview(showBackground = true, widthDp = 320)
    @Composable
    fun PreviewMainScreen() {
        Greeting()
    }

按预期工作。

令人惊讶的是，这是我不明白的一点，一旦预览正确呈现，我可以再次添加 setContent，它会更新并仍然显示。

Jetpack Compose 实时预览

Jetpack compose live preview

android

live-preview

android-jetpack-compose