Android Compose ConstraintLayout：文本溢出时分隔线宽度不一致问题

问题分析 #

当前的ConstraintLayout实现中，文本溢出可用空间时左右分隔线宽度不一致，核心原因是两个分隔线各自独立与文本两端建立约束，空间不足时约束系统无法保证两者的宽度分配完全对称。要实现分隔线收缩时始终同宽，需要通过**水平链（Horizontal Chain）**来统一管控空间分配逻辑。

修复方案 #

通过创建水平链绑定左分隔线、文本、右分隔线，设置链样式为SpreadInside，让两侧分隔线均匀分配文本之外的剩余空间；同时调整各元素的约束规则，确保文本优先占用所需空间，分隔线在最小/最大宽度范围内动态调整且保持对称。

修改后的代码 #

@Preview
@Composable
fun MyComponent() {
    val minLineWidth = 6.dp // 匹配规则2的最小6dp要求
    val maxLineWidth = 16.dp

    val idLeft = "line_left"
    val idRight = "line_right"
    val idText = "text"

    val constraint = ConstraintSet {
        val startLineRef = createRefFor(idLeft)
        val endLineRef = createRefFor(idRight)
        val textRef = createRefFor(idText)

        // 创建水平链，串联三个元素并设置对称分配的链样式
        createHorizontalChain(startLineRef, textRef, endLineRef, chainStyle = ChainStyle.SpreadInside)

        constrain(startLineRef) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            // 让分隔线填充链分配的空间，同时限制宽度范围
            width = Dimension.fillToConstraints.atLeast(minLineWidth).atMost(maxLineWidth)
        }

        constrain(endLineRef) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            width = Dimension.fillToConstraints.atLeast(minLineWidth).atMost(maxLineWidth)
        }

        constrain(textRef) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            // 文本优先占用所需宽度，空间不足时触发省略号
            width = Dimension.wrapContent
        }
    }

    ConstraintLayout(
        modifier = Modifier.requiredWidth(80.dp),
        constraintSet = constraint,
    ) {
        Divider(
            modifier = Modifier.layoutId(idLeft),
            color = Color.Red
        )

        Divider(
            modifier = Modifier.layoutId(idRight),
            color = Color.Blue
        )

        Text(
            modifier = Modifier.layoutId(idText),
            text = "ABCDEFG",
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

关键改动说明 #

1. 水平链绑定：createHorizontalChain将三个元素串联，ChainStyle.SpreadInside会强制两端的分隔线均分文本之外的剩余空间，从根源保证宽度对称。
2. 分隔线约束调整：用Dimension.fillToConstraints让分隔线填充链分配的空间，搭配atLeast和atMost限制宽度在6dp-16dp区间，满足规则2的尺寸要求。
3. 文本约束调整：文本设置为Dimension.wrapContent，优先占用所需宽度，当空间不足时，会触发maxLines=1和overflow=Ellipsis显示省略号，符合规则4。
4. 分隔线始终可见：最小宽度6dp的限制，确保即使文本占满大部分空间，分隔线也能保持最小尺寸显示，满足规则1。

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