如何基于相邻视图添加Jetpack Compose修饰符以实现指定布局？

需求说明 #

• 分割线高度仅匹配右侧多行文本，不得延伸至底部文本
• 底部文本需与右侧文本保持左对齐

错误代码片段 #

@Composable
fun Sample() {
    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .padding(10.dp)
    ) {
        Text("Left Text")
        
        Divider(
            Modifier
                .padding(horizontal = 10.dp)
                .fillMaxHeight()
                .width(4.dp),
            color = Color.Black
        )

        Column {
            Text("Right Looooong Text")
            Text("Bottom Text")
        }
    }
}

修正后代码 #

使用ConstraintLayout实现精确布局控制，满足需求：

@Composable
fun Sample() {
    ConstraintLayout(
        modifier = Modifier.padding(10.dp)
    ) {
        val (leftText, divider, rightTextGroup, bottomText) = createRefs()

        // 左侧文本
        Text(
            text = "Left Text",
            modifier = Modifier.constrainAs(leftText) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }
        )

        // 分割线：高度与左侧/右侧文本组对齐
        Divider(
            modifier = Modifier
                .constrainAs(divider) {
                    top.linkTo(leftText.top)
                    bottom.linkTo(leftText.bottom)
                    start.linkTo(leftText.end, margin = 10.dp)
                    width = Dimension.value(4.dp)
                },
            color = Color.Black
        )

        // 右侧多行文本组
        Column(
            modifier = Modifier.constrainAs(rightTextGroup) {
                top.linkTo(leftText.top)
                start.linkTo(divider.end, margin = 10.dp)
            }
        ) {
            Text("Right Looooong Text")
            // 可添加更多多行文本内容
        }

        // 底部文本：与右侧文本组左对齐
        Text(
            text = "Bottom Text",
            modifier = Modifier.constrainAs(bottomText) {
                top.linkTo(rightTextGroup.bottom, margin = 4.dp)
                start.linkTo(rightTextGroup.start)
            }
        )
    }
}

修正思路 #

1. 原代码错误将底部文本纳入右侧Column，导致Row高度包含底部文本，分割线fillMaxHeight()会延伸至底部。
2. 改用ConstraintLayout后：
   • 约束分割线的上下边缘与左侧文本、右侧多行文本组对齐，确保分割线高度仅匹配目标文本区域
   • 直接将底部文本的左侧边缘与右侧多行文本组对齐，精准实现左对齐要求

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