预览您的 UI
使用 @Preview 快速迭代。
预览您的 UI 是 CoddyKit 上的免费 Android Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 4 节课。
预览的作用
在设备上构建并运行应用需要时间。Compose 提供了一种更快查看界面的方式：预览。
预览会直接在 Android Studio 中渲染可组合项，因此您无需在模拟器或手机上启动完整应用，就可以检查布局。
@Preview 注解
要预览一个可组合项，您需要创建一个单独的函数，并为它添加 @Preview。Android Studio 随后会在设计窗格中显示渲染结果。
预览函数本身也是一个可组合项，因此它同时带有 @Preview 和 @Composable。
@Preview
@Composable
fun GreetingPreview() {
Greeting("World")
}预览不接受参数
预览函数不能接受参数。Compose 需要自行调用它，因此无法为它提供实参。
这就是您需要创建包装函数的原因：预览函数调用真正的可组合项，并传入用于显示的示例数据。
@Preview
@Composable
fun ProfilePreview() {
ProfileCard(name = "Ada")
}为预览函数命名
一种常见约定是使用所展示的可组合项名称为预览命名，并以 Preview 结尾。例如，对于 Greeting，您可以写成 GreetingPreview。
这样可以一眼看出预览对应哪个可组合项，尤其是在文件内容逐渐增多时更为清晰。
@Preview
@Composable
fun HeaderPreview() {
Header()
}为预览设置名称
您可以使用 name 参数为预览添加标签。这个标题会显示在 Android Studio 中渲染预览的上方。
有帮助的名称可以让您快速区分多个预览。
@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
ProfileCard("Ada")
}显示背景
默认情况下，预览可能会在透明背景上渲染。设置 showBackground = true，即可在可组合项后面绘制纯色背景。
这样在设计窗格中判断间距和颜色会容易得多。
@Preview(showBackground = true)
@Composable
fun TextPreview() {
Text("Hello!")
}同时显示多个预览
您可以为一个函数添加多个 @Preview 注解，也可以编写多个预览函数。每个预览都会单独渲染。
这对于使用不同示例数据检查同一个界面非常方便，例如分别使用短名称和长名称。
@Preview
@Composable
fun ShortNamePreview() {
Greeting("Ada")
}
@Preview
@Composable
fun LongNamePreview() {
Greeting("Grace Hopper")
}预览不同尺寸
widthDp 和 heightDp 参数可以设置预览画布的大小。这样您就能测试布局在较小或较大区域中的显示效果。
调整预览尺寸有助于发现换行不自然或内容溢出的问题。
@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
Greeting("Hi")
}深色模式预览
您可以将 uiMode 参数设置为夜间模式，预览界面在深色主题下的效果。这样可以发现某些颜色在深色背景上显示不正确的问题。
尽早检查浅色和深色预览，可以避免之后遇到意外问题。
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
ProfileCard("Ada")
}交互式和实时预览
Android Studio 可以在您输入时更新预览，因此更改几乎会立即显示。它还提供交互模式，让您无需完整构建就能点击操作界面。
预览不能替代运行应用，但能让屏幕设计的速度大幅提升。
预览仅用于调试
预览函数是开发工具的一部分。它们不会包含在发布的应用中，也不会显示给用户。
因此，您可以放心地使用示例数据添加任意数量的预览。它们只会影响您在集成开发环境中看到的内容。
@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
InfoBlock()
}快速检查
让我们复习一个关于预览函数的重要规则。
回顾
您学会了使用 @Preview 在 Android Studio 中渲染可组合项，无需设备。预览函数不接受参数，因此需要使用示例数据包装真正的可组合项。
有用的选项包括 name、showBackground、widthDp、heightDp 和用于深色模式的 uiMode。预览是仅用于调试的工具。接下来，您将综合所学内容构建一个真正的个人资料卡片。
常见问题解答
「预览您的 UI」课时是免费的吗？
是的 — 「预览您的 UI」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 4 节课。
「预览您的 UI」这节课中我会学到什么？
使用 @Preview 快速迭代。 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Android Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「预览您的 UI」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Android Academy 课中编写并运行代码吗？
能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。