Jetpack Compose中Row内双Text的自适应布局与溢出省略实现问题

你当前的代码给第一个Text设置了weight(1f)（默认fill=true），导致无论第一个文本长短，它都会填充Row中除第二个Text外的所有剩余空间，因此第二个Text始终固定在右侧，无法在第一个文本较短时紧随其后。

解决方案 #

给第一个Text的weight参数设置fill = false，即可实现需求：

@Composable
fun Example(
    firstText: String,
    secondText: String
) = Row(
    modifier = Modifier.padding(top = 16.dp)
) {
    Text(
        text = firstText,
        modifier = Modifier
            .weight(1f, fill = false) // 关键修改：fill设为false
            .padding(start = 16.dp),
        overflow = TextOverflow.Ellipsis,
        maxLines = 1
    )
    Text(
        text = secondText,
        modifier = Modifier
            .padding(horizontal = 16.dp)
    )
}

原理说明 #

• weight(1f, fill = false)让第一个Text参与Row剩余空间的分配，但仅在自身内容宽度超过分配空间时才填充该空间，否则保持内容本身的宽度。
• 当第一个文本较短时，Row会优先测量两个Text的内容宽度，第一个Text仅占用自身内容宽度，第二个Text自然紧随其后。
• 当第一个文本过长时，Row总宽度不足以容纳两个Text的完整内容，此时第一个Text会被分配剩余的全部空间（减去第二个Text的宽度），并通过TextOverflow.Ellipsis和maxLines = 1显示省略号，第二个Text则被推至Row末尾。

可选：ConstraintLayout实现方式 #

如果偏好使用ConstraintLayout，也可以通过约束关系实现相同效果：

@Composable
fun ExampleWithConstraintLayout(
    firstText: String,
    secondText: String
) {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 16.dp)
    ) {
        val (firstTextRef, secondTextRef) = createRefs()
        
        Text(
            text = firstText,
            modifier = Modifier
                .padding(start = 16.dp)
                .constrainAs(firstTextRef) {
                    start.linkTo(parent.start)
                    end.linkTo(secondTextRef.start, margin = 16.dp)
                    width = Dimension.fillToConstraints
                },
            overflow = TextOverflow.Ellipsis,
            maxLines = 1
        )
        
        Text(
            text = secondText,
            modifier = Modifier
                .padding(end = 16.dp)
                .constrainAs(secondTextRef) {
                    start.linkTo(firstTextRef.end, margin = 16.dp)
                    end.linkTo(parent.end)
                    width = Dimension.wrapContent
                }
        )
    }
}

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