Jetpack Compose @Preview参数widthDp、heightDp作用及预览异常问题

1. widthDp与heightDp的作用 #

这两个参数用于强制指定Jetpack Compose预览画布的固定尺寸，单位为dp。默认状态下预览画布会根据内部Composable组件的尺寸自动适配（wrap content），设置这两个参数后，画布会固定为指定的宽高尺寸，方便模拟特定尺寸的组件、小部件或者屏幕场景。

2. 尺寸不符合预期的原因 #

该问题是Compose 1.0.x版本的已知bug导致的：在androidx.compose.ui:ui-tooling-preview 1.0.x版本中，widthDp和heightDp的输入值被错误识别为像素（px）单位，而非官方标注的dp单位。
比如你设置了widthDp = 200，系统实际会把200px作为画布宽度，如果你的预览运行在xxhdpi（3倍密度，1dp=3px）的设备环境下，画布实际的宽度仅为 200/3 ≈ 67dp，远小于预期的200dp，此时内部100dp的Box自然会远大于画布的四分之一，甚至超出画布范围，看起来尺寸不符合预期。

3. 解决方案 #

• 方案1（推荐）：升级Compose预览依赖版本
  将androidx.compose.ui:ui-tooling-preview升级到1.1.0及以上稳定版本，该版本已经修复了单位识别错误的问题。升级时注意匹配对应的AGP、Gradle版本，建议AGP升级到7.2.0+，Gradle升级到7.4+，避免版本不兼容问题。
• 方案2（临时兼容，不推荐长期使用）：
  如果暂时无法升级依赖，可以根据你预览环境的屏幕密度手动换算参数值：比如你需要200dp的宽度，在3倍密度的设备下将参数写为widthDp = 600（200*3），即可得到预期的尺寸。注意该方案的效果和你本地AS的预览设备密度绑定，更换设备后需要重新换算。

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