Jetpack Compose中ConstraintLayout内的长文本如何实现自动换行

你的布局出现文本无法自动换行，核心是ConstraintLayout中约束边界的宽度匹配逻辑没有配置正确：

• 你给右侧Column设置了fillMaxWidth()，会直接让Column撑满父布局整个宽度，忽略和左侧Image的约束边界，导致Column宽度溢出屏幕
• Text设置wrapContentWidth()会优先匹配文本内容宽度，不会主动根据父布局可用宽度折行

修改步骤 #

1. 将Column的constrainAs约束块中添加width = Dimension.fillToConstraints，或者直接给Column的Modifier设置width(0.dp)，替换掉原来的fillMaxWidth()，让Column宽度严格匹配你设置的左右约束（左侧到Image末尾、右侧到父布局末尾）
2. 去掉Text的wrapContentWidth()修饰符，让Text默认填充父布局Column的可用宽度，超出宽度时就会自动换行

修正后代码示例 #

ConstraintLayout(
    Modifier
        .fillMaxWidth()
        .wrapContentHeight()
) {

    Image(
        painter = rememberImagePainter(it.photoUrl.toString()),
        modifier = Modifier
            .constrainAs(photo) {
                start.linkTo(parent.start, margin = 30.dp)
                top.linkTo(parent.top, margin = 30.dp)
            }
            .width(130.dp)
    )

    Column(
        modifier = Modifier
            .constrainAs(holder) {
                start.linkTo(photo.end, margin = 30.dp)
                top.linkTo(photo.top)
                bottom.linkTo(photo.bottom)
                end.linkTo(parent.end, margin = 30.dp)
                // 关键配置：宽度匹配约束边界
                width = Dimension.fillToConstraints
            }
            .wrapContentHeight(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            modifier = Modifier
                .wrapContentHeight(),
            text = "Lorem Ipsu auto text  ator..."
        )
    }
}

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