如何在Jetpack Compose中获取屏幕尺寸相对单位？

CSS里的vh单位对应视口高度的1%，在Jetpack Compose中没有直接提供这个单位，但可以通过以下几种方式实现相同效果：

1. 适配全屏视口（含系统栏处理） #

如果需要的是整个屏幕去除系统栏后的有效高度的百分比，可以通过LocalConfiguration和LocalWindowInsets来计算：

@Composable
fun vh(percent: Float): Dp {
    val config = LocalConfiguration.current
    val insets = LocalWindowInsets.current
    // 计算屏幕总高度减去状态栏、导航栏的高度
    val usableScreenHeight = config.screenHeightDp.dp - insets.statusBars.top.dp - insets.navigationBars.bottom.dp
    return usableScreenHeight * (percent / 100f)
}

使用时直接调用，比如vh(50)就代表有效视口高度的50%，可以直接作为Modifier.height()的参数。

2. 适配局部父布局的视口 #

如果需要基于父容器的可用高度计算百分比，用BoxWithConstraints获取父布局的最大高度后再计算：

BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
    val halfParentHeight = maxHeight * 0.5f // 对应父容器高度的50%，类似50vh
    Box(
        modifier = Modifier
            .height(halfParentHeight)
            .fillMaxWidth()
            .background(Color.Blue)
    )
}

3. 官方推荐的简化写法 #

Compose内置的fillMaxHeight(fraction: Float)修饰符可以直接实现类似vh的效果，比如fillMaxHeight(0.3f)就是占当前可用高度的30%，无需额外计算：

Column(modifier = Modifier.fillMaxSize()) {
    // 占屏幕高度的30%
    Box(modifier = Modifier.fillMaxHeight(0.3f).fillMaxWidth().background(Color.Red))
    // 占据剩余全部高度
    Box(modifier = Modifier.fillMaxSize().background(Color.Green))
}

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