在Jetpack Compose中如何实现sp、%这类动态测量单位？

Compose 本身内置了sp单位但默认仅作用于字体大小场景，百分比（%）单位则没有内置支持，两种动态单位都可以通过原生API扩展实现适配：

1. sp单位的全场景适配实现 #

如果需要在布局宽高、边距等非字体场景使用sp（跟随系统字体缩放变化），可以通过当前LocalDensity动态转换：

// 扩展函数：将Float类型的sp值转换为对应dp值
@Composable
fun Float.asSpToDp(): Dp {
    val density = LocalDensity.current
    return with(density) { this@asSpToDp.sp.toDp() }
}

// 调用示例
Modifier.padding(16f.asSpToDp())

2. 百分比（%）单位的适配实现 #

按适用场景分为屏幕级、父布局级两种实现方案：

2.1 屏幕级百分比适配 #

适合需要和屏幕尺寸成固定比例的元素，直接获取屏幕参数计算即可：

// 扩展属性：获取当前设备屏幕宽高
val Context.screenWidth: Dp
    get() = resources.displayMetrics.run { widthPixels / density }.dp
val Context.screenHeight: Dp
    get() = resources.displayMetrics.run { heightPixels / density }.dp

// 扩展函数：百分比转dp，参数为百分比数值，比如10f对应10%
@Composable
fun Float.percentOfScreenWidth(): Dp {
    val context = LocalContext.current
    return context.screenWidth * (this / 100f)
}
@Composable
fun Float.percentOfScreenHeight(): Dp {
    val context = LocalContext.current
    return context.screenHeight * (this / 100f)
}

// 调用示例：宽度占屏幕的80%
Modifier.width(80f.percentOfScreenWidth())

2.2 父布局级百分比适配 #

适合需要和父布局尺寸成比例的元素，需要通过BoxWithConstraints获取父布局约束后计算：

父级百分比无法作为全局扩展直接使用，需要在对应父布局范围内计算

BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
    // 此处可拿到父布局的可用宽高约束
    val parentWidth = maxWidth
    val parentHeight = maxHeight

    // 子控件宽度占父布局50%，高度占父布局30%
    Box(
        modifier = Modifier
            .width(parentWidth * 0.5f)
            .height(parentHeight * 0.3f)
            .background(Color.Blue)
    )
}

3. 注意事项 #

• 百分比适配优先选择父级约束计算方案，避免嵌套滚动、多窗口场景下屏幕级百分比计算异常
• sp转dp的方案会跟随系统字体缩放变化，适合需要和字体大小同比例缩放的布局元素，比如按钮最小宽度、图标尺寸等
• 所有自定义单位的计算都是实时动态的，系统配置变化（字体缩放调整、窗口大小变化）时会自动重新计算，不需要手动监听更新

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