高效预览 (Previews)

源：使用 @Preview 预览 UI

@Preview 是 Compose 开发效率的倍增器。它允许你在不运行真机的情况下查看 UI 效果。

1. 基础用法

@Preview(
    name = "Light Mode",
    showBackground = true,
    backgroundColor = 0xFFFFFFFF
)
@Composable
fun SimplePreview() {
    MyTheme {
        Button(onClick = {}) { Text("Hello") }
    }
}

2. 预览参数注入 (@PreviewParameter)

当你的组件需要数据时，硬编码假数据很麻烦。@PreviewParameter 允许你注入一组数据进行批量预览。

步骤 A: 创建数据提供者

class UserProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Alice", 20),
        User("Bob", 30),
        User("Charlie", 99) // 边缘情况测试
    )
}

步骤 B: 使用注解

@Preview
@Composable
fun UserCardPreview(
    @PreviewParameter(UserProvider::class) user: User
) {
    UserCard(user = user)
}

此时，Android Studio 会自动生成 3 个预览图，分别对应 Alice, Bob, Charlie。

3. 多重预览 (MultiPreview)

如果你总是需要同时预览深色模式、不同字体大小、不同屏幕尺寸，可以定义一个注解来聚合它们。

@Preview(name = "Light", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_NO)
@Preview(name = "Dark", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(name = "Font 1.5x", fontScale = 1.5f)
annotation class DevicePreviews

// 使用
@DevicePreviews
@Composable
fun MyScreenPreview() {
    MyTheme {
        MyScreen()
    }
}

4. UI 模式检查 (UI Check Mode)

在预览窗口上方，有一个 ✅ 图标。点击它可以开启 UI Check 模式。

它可以自动检测：

• 无障碍问题（如触摸区域过小、对比度不足）。
• 适配问题（如大字体下布局是否重叠）。

这是一项非常强大的自测工具。