在 Jetpack Compose 中以 Constraint 方式包含两个文本的行

Question

我想在一行中包含两个文本，其中第一个文本的宽度达到第二个文本的开头，就像这样

我正在尝试使用 Modifier weight，但获得的结果并不相同。 有没有办法通过使用 Row 本身而不是 ConstraintLayout 来做到这一点。

编辑：

Row(modifier = Modifier.fillMaxWidth()) {
          Text(
            "Some long title abcd efgh ijkl mnop qrst uvwx yzzzzz Some long title abcd efgh ijkl mnop qrst uvwx yzzzzz",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.weight(5f)
          )
          Text("View all", modifier = Modifier.weight(1f))
        }

这有效，如果我遗漏了什么，请提出更好的解决方案。

编辑 2： 它给我这样的结果： 我希望标题从行的开头开始

Answer 1

你可以使用类似的东西：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween) {
    Text(
        "Short title",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier.weight(1f)
    )
    Text("View all")
}

Answer 2

只是为了比较，这是相同的解决方案，但完成了

ConstraintLayout

：

ConstraintLayout(
    modifier = Modifier.fillMaxSize()
) {
    val (title, viewAll) = createRefs()

    Text(text = "View all", Modifier
        .background(Color.Green)
        .constrainAs(viewAll) {
            top.linkTo(parent.top, 8.dp)
            end.linkTo(parent.end, 8.dp)
        })

    Text(text = "Short title",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier
            .background(Color.White)
            .constrainAs(title) {
                top.linkTo(parent.top, 8.dp)
                start.linkTo(parent.start, 8.dp)
                end.linkTo(viewAll.start, 8.dp)
                width = Dimension.fillToConstraints
            })
}

Answer 3

如果你有所有单行文本，那么只需使用这个

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(text = "Start")
    Text(text = "End")
}

当我们使用

horizontalArrangement = Arrangement.SpaceBetween

时，如果文本总是单行，我们不需要分配

weights

。

同样适用于三个

Texts

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(text = "Start")
    Text(text = "Center")
    Text(text = "End")
}