Android Compose ConstraintLayout长文本显示异常及布局适配问题求助

问题原因 #

1. 原代码中Text仅约束了顶部和右边界到Image的左边界，未绑定左边界到父布局。当文本过长时，Compose会优先保证文本末尾内容可见，导致文本起始部分被挤出父布局范围，无法正常显示。
2. 直接设置Dimension.fillToConstraint会强制Text占满父布局左边界到Image左边界的全部宽度，短文本也会被拉伸至该宽度，不符合自适应的预期效果。

修正后的代码 #

@Preview
@Composable
private fun composable(){
    ConstraintLayout(
        modifier = Modifier
            .padding(all = 8.dp)
    ) {
        val (title, type) = createRefs()

        Image(
            painter = painterResource(R.drawable.ic_chat_grey),
            contentDescription = "Badge",
            colorFilter = ColorFilter.tint(
                colorResource(id = R.color.white)
            ),
            modifier = Modifier
                .size(28.dp)
                .constrainAs(type) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                },
        )
        Text(
            text = "123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(type.start)
                // 让文本自适应宽度，同时限制在约束范围内
                width = Dimension.preferredWrapContent
                // 给文本和图标添加间距
                end.margin = 8.dp
            },
            fontSize = 16.sp,
            style = TextStyle(
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight.Light,
                color = colorResource(id = R.color.white)
            ),
            textAlign = TextAlign.Start
        )
    }
}

关键修改点 #

• 给Text添加start.linkTo(parent.start)，明确文本左边界，避免长文本向左溢出父布局。
• 使用width = Dimension.preferredWrapContent替代fillToConstraint，让文本在空间充足时自适应宽度，空间不足时自动换行。
• 添加end.margin = 8.dp，保证Text和Image之间有合理间距，优化布局美观度。

如果需要限制文本行数并处理溢出（比如末尾显示省略号），可额外添加以下属性：

maxLines = 2,
overflow = TextOverflow.Ellipsis

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