Jetpack Compose中如何为ConstraintLayout设置dimensionRatio属性？

对应XML ConstraintLayout dimensionRatio的实现方式 #

如果在Jetpack Compose中使用ConstraintLayout布局，可直接在约束块中调用dimensionRatio属性实现和XML完全一致的宽高比效果，使用规则和XML逻辑对齐：

• 首先将需要跟随约束动态调整的边设置为Dimension.matchParent（对应XML中设为0dp的匹配约束效果）
• 直接传入比例字符串，格式为宽:高，也可添加W,/H,前缀指定基准边，例如"H,3:2"代表以宽度为基准，高度为宽度的2/3

示例代码 #

// 需先引入ConstraintLayout Compose版本依赖
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

// 布局逻辑代码
ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
    val cardRef = createRef()
    Box(
        modifier = Modifier
            .constrainAs(cardRef) {
                // 左右约束到父布局边缘，宽度跟随父布局动态变化
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                top.linkTo(parent.top)
                width = Dimension.matchParent
                // 设置宽高比为16:9，即高度=宽度*9/16
                dimensionRatio = "16:9"
            }
            .background(Color.Gray)
    )
}

非ConstraintLayout场景的替代方案 #

如果没有使用ConstraintLayout的需求，可直接调用系统自带的aspectRatio修饰符实现同等效果，代码更简洁：

Box(
    modifier = Modifier
        .fillMaxWidth()
        // 传入宽高比的浮点值，16:9即16f除以9f
        .aspectRatio(16f / 9f)
        .background(Color.Gray)
)

内容的提问来源于stack exchange，提问作者Guru Karthi R