Android Academy · 课时

预览和热重载

Q: 「预览和热重载」这节课中我会学到什么？

借助 Compose 预览快速迭代 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

借助 Compose 预览快速迭代

第 4 / 4 课13 个步骤

预览和热重载 是 CoddyKit 上的免费 Android Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 4 节课。

设计时预览

Compose 的最佳功能之一是 @Preview：您可以在 Android Studio 中查看可组合项的渲染效果，无需在设备或模拟器上运行应用。

@Preview 注解

在 @Composable 函数上方添加 @Preview。Android Studio 会在设计窗格中渲染它。

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")
}

预览无需参数

预览函数必须能够在不传入参数的情况下调用。因此，您需要创建一个提供示例数据的包装可组合项，然后预览这个包装项。

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada", followers = 42)
}

为预览函数命名

按照惯例，预览包装函数以可组合项的名称加上后缀 Preview 命名，例如 GreetingPreview。这样既便于查找，也表明它们不会用于生产环境。

预览参数

@Preview 接受用于调整渲染效果的参数，例如 showBackground、name 和 widthDp。

@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
    Greeting(name = "Hi")
}

showBackground

默认情况下，预览使用透明背景。传入 showBackground = true 可渲染不透明表面，让您在设计时更容易看清文本。

多个预览

您可以在一个函数上叠加多个 @Preview 注解，以并排查看不同配置，例如较小和较大的宽度。

@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
    HomeScreen()
}

交互式预览

Android Studio 为预览提供交互模式。您可以直接在预览中点击按钮并触发状态变化，而无需部署应用。

实时编辑 / 热重载

使用实时编辑时，对可组合项主体的修改几乎会立即显示在预览中，甚至会显示在正在运行的设备上，无需完整重新构建。这会大幅加快设计迭代。

预览不产生运行时开销

预览函数会从发布版本中移除，因此添加许多预览不会产生运行时开销。请放心使用它们，以便直观记录和测试每个可组合项。

完整示例

下面是一个可组合项及其预览。打开设计窗格即可立即查看渲染效果。

@Composable
fun Badge(label: String) {
    Text(text = label, color = Color.White)
}

@Preview(showBackground = true)
@Composable
fun BadgePreview() {
    Badge(label = "NEW")
}

快速检查

为什么 @Preview 函数不能接受参数？

在交互式课程中回答

回顾

预览可以加快 Compose 开发：

在无参数可组合项上方添加 @Preview。
使用 showBackground 和 widthDp 等选项。
叠加多个预览；使用交互模式和实时编辑快速迭代。

免费开始

用 AI 导师学习 Kotlin — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 36
课程: 152

免费开始学习查看完整课程

常见问题解答

「预览和热重载」课时是免费的吗？

是的 — 「预览和热重载」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 4 节课。

「预览和热重载」这节课中我会学到什么？

借助 Compose 预览快速迭代你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「预览和热重载」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗？

能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Android Academy