如何在Jetpack Compose @Preview中自动计算WindowSizeClass？

核心方案 #

既然calculateWindowSizeClass在预览环境无法获取Activity，我们可以复刻官方的尺寸判断逻辑——根据预览的实际屏幕宽度（dp值）自动计算对应的WindowWidthSizeClass，既不用硬编码枚举值，又能贴合预览设备的真实尺寸。

实现步骤 #

• 获取预览屏幕宽度：通过LocalConfiguration.current.screenWidthDp拿到当前预览的屏幕宽度（已自动转换为dp单位）
• 匹配官方阈值：按照官方定义的规则判断尺寸类：
  • 宽度≤600dp → Compact（手机）
  • 600dp<宽度<840dp → Medium（小平板）
  • 宽度≥840dp → Expanded（大平板/折叠屏）
• 替换预览中的计算逻辑：把依赖Activity的calculateWindowSizeClass换成我们自己的预览专用计算方法

完整代码示例 #

@ExperimentalMaterial3WindowSizeClassApi
@Preview(
    name = "Smartphone, Nokia X20",
    group = "Smartphone",
    showSystemUi = true,
    device = "spec:width=1080px,height=2400px,dpi=400"
)
@Preview(
    name = "Tablet, Nokia T20",
    group = "Tablet",
    showSystemUi = true,
    device = "spec:width=1200px,height=2000px,dpi=280"
)
@Composable
fun MasterDataScreenPreview() {
    val windowWidthSize = calculatePreviewWindowWidthSizeClass()
    MyAppTheme {
        Surface {
            MainScreenContent(
                uiState = MainScreenUiState(),
                windowSize = windowWidthSize,
            )
        }
    }
}

@Composable
private fun calculatePreviewWindowWidthSizeClass(): WindowWidthSizeClass {
    val screenWidthDp = LocalConfiguration.current.screenWidthDp
    return when {
        screenWidthDp < 600 -> WindowWidthSizeClass.Compact
        screenWidthDp < 840 -> WindowWidthSizeClass.Medium
        else -> WindowWidthSizeClass.Expanded
    }
}

// 真实设备上的正常使用逻辑（保留原有方法）
@Composable
fun MainScreen() {
    val windowSizeClass = calculateWindowSizeClass(LocalContext.current.getActivity()!!)
    MainScreenContent(
        uiState = MainScreenUiState(),
        windowSize = windowSizeClass.widthSizeClass
    )
}

fun Context.getActivity(): ComponentActivity? = when (this) {
    is ComponentActivity -> this
    is ContextWrapper -> baseContext.getActivity()
    else -> null
}

方案优势 #

• 和真机逻辑一致：完全遵循官方WindowSizeClass的判断规则，预览和真机表现无差异
• 无需硬编码：预览会根据你设置的设备spec自动适配尺寸类，不用为每个预览单独写死枚举值
• 预览直接生效：不依赖Activity，纯Compose环境即可运行，在Android Studio里实时查看不同设备的界面表现

内容的提问来源于stack exchange，提问作者Alexander Hoffmann