如何在Android Studio Jetpack Compose预览中显示设备框架

你的Compose预览仅展示组件内容、看不到设备框架，是因为默认@Preview注解未配置系统UI显示及设备相关参数，以下是具体解决步骤：

1. 配置带设备框架的预览注解 #

给预览Composable函数添加@Preview注解，并启用showSystemUi参数，还可指定目标设备型号：

@Preview(
    showSystemUi = true, // 显示设备状态栏、导航栏等系统UI框架
    device = Devices.PIXEL_7, // 可选：指定预览的设备型号，如不设置则用默认设备
    showBackground = true // 可选：添加背景色，让预览更贴近真实设备效果
)
@Composable
fun GreetingPreview() {
    Greeting(name = "Android")
}

2. 关键参数说明 #

• showSystemUi = true：核心配置，开启后会渲染设备的状态栏、底部导航栏（适配带导航键的设备），还原真实设备的UI结构。
• device参数：可使用Devices类预设的设备型号，比如Devices.PIXEL_6、Devices.NEXUS_5；也可自定义设备规格，格式为spec: "width=411dp,height=891dp,dpi=420"。
• showBackground = true：默认预览背景为透明，开启后会添加白色背景，更符合真实设备的显示场景。

3. 版本要求 #

确保你的Android Studio版本为Arctic Fox（2020.3.1）及以上，这些预览配置仅在较新版本的Jetpack Compose中支持。

内容的提问来源于stack exchange，提问作者john doe