Jetpack 组合实时预览

Posted 2023-04-13

【中文标题】Jetpack 组合实时预览

【英文标题】：Jetpack compose live preview

【发布时间】：2020-02-20 15:05:45

【问题描述】：

我刚开始研究 jetpack compose 并下载了 Jetnews 的样本。

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

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

【参考方案1】：

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

【参考方案2】：

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

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

要获得实时预览，我们需要在@Composable 标记之前添加@Preview 标记，并且必须要渲染一些有趣的东西。

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

【讨论】：

感谢您的详细回答，但正如我在问题中提到的那样，我已经添加了 @Preview 注释，即使那样它也没有工作。我在构建并重新打开时工作。

我们在文件中添加预览标签时有延迟。我认为由于这是金丝雀版本，官方版本将对此有一些解决方案，或者延迟会变短。

【参考方案3】：

更新：

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

@Preview
@Composable
fun JetnewsApp()  ... 

---

您只需选中“显示装饰”选项即可显示真实布局预览。

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

查看下图：

更新 2：

如果 android Studio 一开始无法正常工作，也会使 Android Studio 失效并重新启动。请记住，这仍在开发中。

【讨论】：

@prany 请告诉我这个窗口将从哪里打开？

这只是装饰预览，如果预览窗格不可见，那么你甚至没有这个按钮

他说“我也加了@Preview注解”

首先我只是误解了que的内容。当我尝试相同的示例并在JetnewsApp 上添加@Preview 时，我可以看到预览。 imgur.com/lbXE8I5

非常感谢 pRaNay，我已经添加了预览注释，但当时它不起作用我构建应用程序和绳索类然后这个预览窗口自动出现。

【参考方案4】：

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

【讨论】：

它也适用于具有默认值的参数。

【参考方案5】：

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

所以

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

会失败并且

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

按预期工作。

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