如何在Android Jetpack Compose的Box中按百分比设置子元素尺寸与位置

方案1：纯Box组件实现（无需额外依赖） #

直接用BoxWithConstraints获取父容器的宽度约束，直接设置对应比例的宽度和偏移即可，示例代码如下：

BoxWithConstraints(
    modifier = Modifier
        .fillMaxWidth()
        .height(120.dp)
        .background(Color.Gray)
) {
    // 直接获取父Box的总宽度
    val parentWidth = maxWidth
    Button(
        onClick = { /* 按钮点击逻辑 */ },
        modifier = Modifier
            // 宽度设为父容器的20%
            .width(parentWidth * 0.2f)
            // X轴偏移为父容器宽度的50%，Y轴偏移可按需调整
            .offset(x = parentWidth * 0.5f)
            // 可选：垂直居中对齐
            .align(Alignment.CenterStart)
    ) {
        Text(text = "按钮")
    }
}

若需要避免偏移后的按钮超出父容器显示，可给父BoxWithConstraints添加clipToBounds()修饰符。

方案2：Compose ConstraintLayout 实现（贴合传统开发习惯） #

如果你更熟悉原ConstraintLayout的引导线百分比配置，可以引入Compose版ConstraintLayout依赖，逻辑和你熟悉的layout_constraintGuide_percent完全一致：

ConstraintLayout(
    modifier = Modifier
        .fillMaxWidth()
        .height(120.dp)
        .background(Color.Gray)
) {
    // 等价于传统布局中layout_constraintGuide_percent = 0.5的引导线
    val startGuideline = createGuidelineFromStart(0.5f)
    val buttonRef = createRef()

    Button(
        onClick = { /* 按钮点击逻辑 */ },
        modifier = Modifier.constrainAs(buttonRef) {
            // 按钮左边缘对齐50%位置的引导线
            start.linkTo(startGuideline)
            // 宽度占父容器的20%
            width = Dimension.percent(0.2f)
            // 可选：垂直居中
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
        }
    ) {
        Text(text = "按钮")
    }
}

两种方案最终效果一致，可根据项目已有的依赖情况选择对应实现。

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