Jetpack Compose：左侧文本过长时强制左右文本分行显示的实现

原代码的问题在于：使用Row布局时，左侧Text的weight(1f)会强制占据剩余空间，但未限制单行显示，且Row默认强制子项在同一行排列，当字号增大或左侧文本过长时，会导致布局错乱或文本溢出。

要实现左侧文本过长时保持单行，右侧文本自动换行到下一行，可以用以下两种方案：

方案一：使用 FlowRow（推荐） #

FlowRow 是 Compose 提供的自动换行布局，能根据可用空间自动调整子项排列，结合 Arrangement.SpaceBetween 可实现同行时左右对齐，空间不足时右侧文本自动换行。

// 需要导入 androidx.compose.foundation.layout.FlowRow
FlowRow(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.Top
) {
    Text(
        modifier = Modifier.padding(top = 16.dp, bottom = 8.dp),
        text = first.toAnnotatedString(),
        style = style,
        maxLines = 1, // 强制单行
        overflow = TextOverflow.Ellipsis // 文本过长时显示省略号，可选
    )
    Text(
        modifier = Modifier.padding(top = 16.dp, bottom = 8.dp),
        text = second.toAnnotatedString(),
        style = style
    )
}

方案二：使用 ConstraintLayout #

通过约束布局精确控制文本位置，让右侧文本在空间不足时自动换行到下方：

// 需要导入 androidx.compose.foundation.layout.ConstraintLayout
ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
    val (leftText, rightText) = createRefs()

    Text(
        modifier = Modifier
            .constrainAs(leftText) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(rightText.start, margin = 8.dp)
                width = Dimension.fillToConstraints // 占据左侧可用空间
            }
            .padding(top = 16.dp, bottom = 8.dp),
        text = first.toAnnotatedString(),
        style = style,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis
    )

    Text(
        modifier = Modifier
            .constrainAs(rightText) {
                top.linkTo(leftText.top)
                end.linkTo(parent.end)
                width = Dimension.wrapContent
                // 允许右侧文本在空间不足时换行到下方
                wrapInParent(width = WrapInParentOverflow.Unbounded)
            }
            .padding(top = 16.dp, bottom = 8.dp),
        text = second.toAnnotatedString(),
        style = style
    )
}

关键设置说明 #

• 给左侧 Text 添加 maxLines = 1，强制保持单行显示；可选添加 overflow = TextOverflow.Ellipsis 处理文本溢出。
• 使用 FlowRow 或 ConstraintLayout 替代普通 Row，解决强制同行导致的布局问题，实现空间不足时自动换行。

内容的提问来源于stack exchange，提问作者A. Cedano