ConstraintLayout 文字重叠？解决两端对齐文本自动换行难题

2024-08-06 04:39:11

在 Jetpack Compose 的开发过程中，我们经常需要在列表项中放置两个文本，一个左对齐，另一个右对齐，例如显示商品价格或时间范围。我们希望这些文本能够根据内容长度自动调整，避免难看的重叠。然而，ConstraintLayout 在处理这个问题上偶尔会让我们感到困惑。

试想一下，你使用 start 和 end 约束将两个文本分别固定在父布局的两端，满心期待它们能和谐共处。但是，当其中一个文本内容过长，它就会毫不留情地覆盖另一个文本，破坏了我们精心设计的布局。

出现这个问题的原因在于 ConstraintLayout 虽然强大灵活，但在处理文本自动换行时需要我们稍加引导。当我们使用 start 和 end 约束时，ConstraintLayout 默认会优先满足约束条件，而不会自动压缩另一个文本的空间，最终导致了文本重叠的现象。

ChainStyle 和 fill：ConstraintLayout 的救星

想要解决这个问题，我们需要请出 ChainStyle 和 fill 这两位帮手。ChainStyle 就像一个指挥家，负责协调链式约束中各个子元素的行为；而 fill 则像一个空间魔法师，决定了子元素如何填充可用空间。

让我们通过一个具体的例子来说明如何使用这两个属性来解决文本重叠的问题。

假设我们正在创建一个显示商品名称和价格的列表项，我们希望商品名称左对齐，价格右对齐，并且在内容过长时能够自动换行。

首先，我们需要使用 createHorizontalChain 将两个 Text 组件添加到一个水平链中，并设置 ChainStyle.Packed 样式，这将使两个文本组件尽可能靠近，并居中显示：

ConstraintLayout(
    modifier = modifier
) {
    val (productNameRef, priceRef) = createRefs()

    createHorizontalChain(productNameRef, priceRef, chainStyle = ChainStyle.Packed)

    // ...
}

接下来，我们分别设置两个 Text 组件的约束和 fill 属性：

Text(
    text = productName,
    modifier = Modifier
        .constrainAs(productNameRef) {
            start.linkTo(parent.start)
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
        }
        .fillMaxWidth()
)

Text(
    text = price,
    textAlign = TextAlign.End,
    modifier = Modifier
        .constrainAs(priceRef) {
            end.linkTo(parent.end)
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
        }
        .fillMaxWidth()
)

通过设置 fillMaxWidth()，我们告诉 ConstraintLayout 这两个 Text 组件应该尽可能地填充水平方向上的可用空间。同时，ChainStyle.Packed 会让它们在空间足够的情况下居中显示，而当空间不足时，自动压缩其中一个组件的宽度，并进行换行，从而避免了文本重叠。

更进一步：控制文本的宽度比例

在某些情况下，我们可能希望两个文本组件的宽度比例保持一致，或者按照一定的比例分配空间。这时候，我们可以使用 ConstraintLayout 提供的 HorizontalChainStyle.ChainSpread 样式，并结合 fillMaxWidth 参数来实现。

例如，我们希望商品名称占据三分之二的宽度，而价格占据三分之一的宽度，可以这样修改代码：

createHorizontalChain(productNameRef, priceRef, chainStyle = ChainStyle.Spread)

// ...

Text(
    // ...
    .fillMaxWidth(0.66f)
)

Text(
    // ...
    .fillMaxWidth(0.33f)
)