如何在Jetpack Compose中实现类似ConstraintLayout的layout_constraintWidth_percent布局效果？

嘿，我完全懂你想要的效果——就是要让左边的文本最多占Row总宽度的50%，超过就自动截断省略；右边的文本则占据剩下的所有空间，内容过长也会省略，而且短文本的时候不会被强行拉宽留白，对吧？

你之前尝试的权重组合差一点就对了，问题出在给两个文本都分配了0.5的权重，导致右边的文本被死死限制在50%宽度，哪怕左边文本很短也没法利用多余空间。调整一下权重和宽度限制的组合就能解决：

正确的实现代码 #

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    // 左边文本：最多占50%宽度，短文本时只占自身需要的空间
    Text(
        text = "LooooooooooooooongOrigin",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier
            .weight(1f, fill = false) // 不强制填充权重空间，只取内容所需宽度
            .maxWidth(0.5f.fillMaxWidth()) // 限制最大宽度为父容器的50%
    )

    // 中间的箭头图标，保持水平内边距
    Icon(
        imageVector = Icons.Default.ArrowForward,
        contentDescription = "指向目的地",
        modifier = Modifier.padding(horizontal = 4.dp)
    )

    // 右边文本：占据剩余所有可用空间，过长则省略
    Text(
        text = "looooooooongDestination",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier.weight(1f)
    )
}

关键逻辑解释 #

• 左边文本的Modifier：weight(1f, fill = false)让文本优先根据自身内容大小占用宽度，不会强制拉宽；搭配maxWidth(0.5f.fillMaxWidth())给它设置了宽度上限，超过50%就触发省略，完美对应你想要的layout_constraintWidth_percent=0.5效果。
• 右边文本的Modifier：只用weight(1f)就够了，它会自动占据Row中所有剩余的可用空间，内容过长时自然截断省略。

验证各种场景 #

• 左右文本都短：|Origin → destination| 正常紧凑显示，无多余空白
• 左边文本超长：|Loooooooo... → destination| 左边在50%宽度处截断
• 右边文本超长：|Origin → looooooooongDest...| 右边占据剩余空间后截断
• 左右文本都超长：|Loooooooo... → looooooooongDest...| 各自在合理空间内截断

备注：内容来源于stack exchange，提问作者P Kuijpers