Jetpack Compose中以约束方式展示两个文本的行

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： 它给我这样的结果： 我想让标题从行的开头开始。

- Ali_Waris

---

请添加您已经尝试过的代码。weight修饰符应该有效。 - Phil Dukhov

抱歉，我也在给第一段文字添加最大宽度...这就是为什么它没有起作用的原因。 - Ali_Waris

请检查此问题是否对您有所帮助：链接。 - Vishnu

您可以从第二个“Text”中删除权重：在这种情况下，第二个大小将首先计算，然后第一个文本将占用剩余空间。有关更多详细信息，请查看此答案。 - Phil Dukhov

当我将权重1f应用于第一个文本并将其宽度设置为fillMaxWidth时，它按预期工作。 - Ali_Waris

Answer 1

你可以使用类似以下的内容：

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

- Gabriele Mariotti

---

如果我们希望两个文本视图（“短标题”和“查看全部”）并排放置，但又要扩展到父级的最大宽度，该怎么办？ - Bheem

它对我非常有效。谢谢@GabrieleMariotti - Vahit Keskin

@Bheem 只需添加 fill = false 即可使其正常工作。 modifier = Modifier.weight(1f, fill = false) - RedSIght

@Bheem 你可以查看这个例子。https://dev59.com/L8Xsa4cB1Zd3GeqPSR5v#73584535 - Gabriele Mariotti

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
            })
}

- Roberto Leinardi

---

谢谢，@Roberto Leinardi 我给你的好答案点了赞 - Sepideh Vatankhah

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")
}

同时，进一步使它们整齐地 居中垂直

{
    Text(
         text = "Start",
         modifier = Modifier.align(Alignment.CenterVertically)
   )
    Text(text = "End",
         modifier = Modifier.align(Alignment.CenterVertically)
   )
}

- Atiq