logo标签列表

Jetpack Compose 实时预览

androidlive-previewandroid-jetpack-compose
6

我刚开始使用Jetpack Compose，并下载了 Jetnews 的示例。

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

请问有人能帮我找到实时预览吗？
提前致谢。

6个回答
12
如果在JetnewsApp类中添加了@Preview注释后，预览从未显示。在我的情况下，在添加@Preview后，我关闭项目，然后再次打开项目，这对于我的Macbook Pro来说很好用。
2

顺便提一下，目前@Preview仅适用于没有参数的@Composable函数。因此，请再次检查您的可组合函数。

它也适用于具有默认值的参数。 - Tayyab Mazhar
2

更新：

在此之前，我们需要在JetnewsApp上添加@Preview以进行预览。

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

只需要勾选“显示装饰”选项即可显示真实的布局预览。

您可以使用同一选项切换两种预览。

请参阅下面的图像：

enter image description here

更新2：

如果首次无法运行，请使 Android Studio 失效并重新启动。请记住，此仍在开发中。

@prany 请告诉我这个窗口将从哪里打开？ - Khizar Hayat
这只是装饰预览的，如果预览窗格不可见，那么您甚至没有这个按钮。 - Tim
他说：“我也添加了@Preview注释”。 - Tim
起初我误解了问题内容。当我尝试在 JetnewsApp 上添加 @Preview 并运行相同的示例时，我可以看到预览。https://imgur.com/lbXE8I5 - pRaNaY
@KhizarHayat，请查看Akshay的答案。您需要添加@Preview注释以查看预览。 - pRaNaY
1
谢谢pRaNay，实际上我已经添加了预览注释，但在构建应用程序时它没有起作用，然后重新打开类时，这个预览窗口自动出现了。 - Khizar Hayat
2
在JetnewsApp中，SelectTopicButton.kt只有@Preview()标签。当我们在任何文件中使用@Preview()时，它会自动显示在右侧的预览中。
在show decoration模式下，您可以获得带有移动图像的项目预览，了解其在屏幕上的外观。
要获得实时预览，我们需要在@Composable标签之前添加@Preview标签，并且该函数必须有要渲染的内容。
我曾尝试在JetnewsApp.kt中添加@Preview()和@Preview("MyScreen preview")，并且它显示了预览。
感谢您详细的回答，但正如我在问题中提到的，我已经添加了@Preview注释，即使如此它仍然无法工作。只有在我重新构建并重新打开时才能正常工作。 - Khizar Hayat
1
当我们在文件中添加预览标签时会出现延迟。我认为由于这是金丝雀版本，正式发布将会有一些解决方案或者延迟会变短。 - Akshay Nandwana
0
我曾经遇到过类似的问题，即预览无法显示。问题在于函数中同时调用了 setContent。删除此代码并重新构建后，预览便如预期一般显示出来。
所以，
    @Preview(showBackground = true, widthDp = 320)
    @Composable
    fun PreviewMainScreen() {
        setContent {
            Greeting()
        }
    }

会失败并且

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

按预期工作。

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

0

希望上一篇文章中的答案有所帮助。但是，我想添加一个简单的功能，可以在对Jetpack Compose代码进行小修改时提供帮助，避免频繁启动应用程序以查看更改后的布局。

步骤

  1. 打开文字实时编辑。它将放置在Code|Split|Design的左侧。

  2. 启动交互模式。它将放置在函数预览页面下方的Code|Split|Design。

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