Jetpack Compose ConstraintLayout动态对齐与文本换行问题咨询

需求与问题概述 #

需求：

• 文本宽度小于屏幕宽度时，文本右侧对齐Image的起始位置
• 文本宽度超过屏幕宽度时，文本自动换行

使用ConstraintLayout时遇到的矛盾：

• 保留start.linkTo(parent.start, margin = 15.dp)时，文本宽度不足屏幕宽度会居中显示，无法紧贴Image左侧
• 移除该行约束后，文本宽度超限时会溢出屏幕，无法自动换行

解决方案 #

调整Column的宽度约束为Dimension.fillToConstraints，同时保留左右两侧的约束（左侧链接父布局带margin，右侧链接Image左侧带margin）。这样设置后：

• 文本内容较短时，Column会填充到Image的起始位置，整体容器紧贴Image左侧
• 文本内容较长时，Column的宽度被限制在父布局左侧margin和Image左侧之间，文本会自动换行

修改后的代码 #

ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
    val (column, image) = createRefs()

    Column(
        modifier = Modifier
            .background(Color.White, shape = RoundedCornerShape(8.dp))
            .padding(8.dp)
            .wrapContentHeight()
            .constrainAs(column) {
                start.linkTo(parent.start, margin = 15.dp)
                end.linkTo(image.start, margin = 8.dp)
                // 将宽度约束改为fillToConstraints，让Column填充左右约束之间的空间
                width = Dimension.fillToConstraints
            }
    ) {
        Text(
            text = "Div",
            fontWeight = FontWeight.Bold,
            color = Color.Red,
            fontSize = 18.sp
        )
        Text(
            text = "hello,world!",
            fontSize = 14.sp
        )

        Text(
            text = "10:12",
            fontSize = 11.sp
        )
    }

    Image(
        painterResource(id = R.mipmap.stock2), "",
        modifier = Modifier
            .size(40.dp)
            .constrainAs(image) {
                top.linkTo(parent.top)
                end.linkTo(parent.end, margin = 12.dp)
            }
    )
}

补充：让文本本身右对齐 #

如果需要Column内的文本自身也右对齐，给Column添加horizontalAlignment = Alignment.End参数即可：

Column(
    modifier = ...,
    horizontalAlignment = Alignment.End
) {
    // 文本内容
}

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