Compose ConstraintLayout未按预期遵守约束问题咨询

这不是ConstraintLayout的固有局限，是你的布局约束设置不完整导致的。以下是具体问题和修复方案：

核心问题点 #

• 控件尺寸约束缺失：在constrainAs块中，你没有给Title控件指定宽度填充规则，导致它会优先以自身内容宽度布局，超出父容器空间时就会忽略你设置的end.linkTo(parent.end)约束。
• Text控件显示规则配置不当：你设置了overflow = TextOverflow.Ellipsis但未指定maxLines，同时如果要实现文本自动换行，当前的配置也没有明确允许多行显示。

修复后的代码 #

1. 完善ConstraintLayout的约束规则 #

给Button明确自适应宽度，给Title设置填充可用空间的宽度约束：

@Composable
fun ConstrainedElements() {
    ConstraintLayout(modifier = Modifier.padding(WindowInsets.safeDrawing.asPaddingValues())) {

        val (button, title) = createRefs()

        RegularButton(text = "Play", modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            width = Dimension.wrapContent // 明确按钮宽度随内容自适应
        })

        Title(
            title = "Title too long that should be wrapped always",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(button.end)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints // 关键：让Title填充按钮到父容器末尾的所有可用空间
            })
    }
}

2. 调整Text的显示逻辑 #

如果要让文本自动换行（实现"always wrapped"），修改Title组件：

@Composable
fun Title(modifier: Modifier = Modifier, title: String) {
    Text(
        text = title,
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Justify,
        // 移除Ellipsis，允许文本自动换行显示
        modifier = modifier
    )
}

如果需要单行超出时显示省略号，就补充maxLines配置：

@Composable
fun Title(modifier: Modifier = Modifier, title: String) {
    Text(
        text = title,
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Justify,
        overflow = TextOverflow.Ellipsis,
        maxLines = 1, // 指定最大行数后，超出内容才会触发省略
        modifier = modifier
    )
}

总结 #

ConstraintLayout完全支持内容超出空间时的约束遵循，只要给控件明确尺寸约束规则（比如fillToConstraints），同时配合子控件的内容显示逻辑（换行/截断），就能实现预期的布局效果。

内容的提问来源于stack exchange，提问作者Jose Navío