Jetpack Compose 深入浅出（一）——预览 @Preview

在 Jetpack Compose 中，@Preview 是一个非常实用的注解，它允许你在 Android Studio 中实时预览 Composable 函数的 UI 效果，而无需运行应用到设备或模拟器上。这极大地提高了 UI 开发效率。

1.`@Preview` 基本用法

最基础的使用方式是在 Composable 函数上方添加 @Preview 注解：

kotlin

less 复制代码

@Preview
@Composable
fun MyPreview() {
    Text("Hello, Jetpack Compose!")
}

添加后，Android Studio 会在预览窗口中显示该 Composable 的效果，你可以实时看到代码修改后的 UI 变化。

2.`@Preview` 常用参数

@Preview 注解有多个可选参数，用于定制预览效果：

name：为预览命名，方便在多个预览中识别

go 复制代码

```
@Preview(name = "我的文本预览")
```

showBackground：是否显示背景（默认白色）

go 复制代码

```
@Preview(showBackground = true)
```

backgroundColor：指定背景颜色（需配合 showBackground 使用）

go 复制代码

```
@Preview(showBackground = true, backgroundColor = 0xFFE0E0E0) // 浅灰色背景
```

widthDp/heightDp：指定预览的宽度和高度（dp 单位）

go 复制代码

```
@Preview(widthDp = 200, heightDp = 100)
```

uiMode：指定 UI 模式，如深色模式、夜间模式等

go 复制代码

```
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) // 深色模式
```

fontScale：指定字体缩放比例，用于测试 accessibility

go 复制代码

kotlin

```
@Preview(fontScale = 1.5f) // 150% 字体大小
```

locale：指定预览的语言环境

kotlin 复制代码

```
@Preview(locale = "fr") // 法语环境
```

device：指定预览的设备型号

go 复制代码

```
@Preview(device = Devices.NEXUS_5) // 模拟Nexus 5设备
```

多个预览

你可以为同一个 Composable 创建多个不同配置的预览：

kotlin

less 复制代码

@Preview(name = "默认预览")
@Preview(name = "深色模式", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(name = "大屏幕", device = Devices.PIXEL_C)
@Composable
fun MultiPreview() {
    MaterialTheme {
        Text("Hello, Multiple Previews!")
    }
}

kotlin 复制代码

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

// Composable 函数一般用大写开头，为了和普通的函数作为区分
// 实际业务组件
//@Preview  不能用于有参数的函数
@Composable
fun Greeting(name: String) {
    Text("Hello, $name!")
}

// 预览函数（仅用于预览，运行时不生效）
@Preview(showBackground = true, backgroundColor = 0xFFE0E0E0,name="background") // 浅灰色背景
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark Theme")
@Preview(widthDp = 100, heightDp = 100,name="size")
@Composable
fun GreetingPreview() {
    Greeting("Preview Mode") // 这里的参数"Preview Mode"仅在预览中显示
}

// 应用入口（运行时实际执行的代码）
@Composable
fun MyApp() {
    Greeting("Actual User") // 运行时显示的内容
}

预览组合

你可以在一个预览函数中组合多个 Composable：

kotlin

less 复制代码

@Preview
@Composable
fun CombinedPreview() {
    MaterialTheme {
        Column {
            Button(onClick = {}) {
                Text("Click me")
            }
            TextField(value = "", onValueChange = {})
        }
    }
}

注意事项

带参数的 Composable 不能直接预览，需要创建一个无参的预览函数来调用它：

kotlin

kotlin 复制代码

// 带参数的Composable
@Composable
fun Greeting(name: String) {
    Text("Hello, $name!")
}

// 预览函数
@Preview
@Composable
fun GreetingPreview() {
    Greeting("Android")
}

预览函数必须是无参的，并且被 @Composable 注解标记
预览不会执行 Composable 中的副作用（如 LaunchedEffect、rememberCoroutineScope 等）
可以通过点击预览窗口中的 "启动预览" 按钮，快速将预览部署到连接的设备或模拟器上

@Preview 是 Jetpack Compose 开发中不可或缺的工具，合理使用它可以显著提升 UI 开发效率和质量。随着你的学习深入，会发现它在多设备适配、主题切换等场景下的巨大价值。

Jetpack Compose 深入浅出（一）——预览 @Preview

1.@Preview 基本用法

2.@Preview 常用参数

多个预览

预览组合

注意事项

1.`@Preview` 基本用法

2.`@Preview` 常用参数