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

Question

我想在一行中包含两个文本，其中第一个文本的宽度达到第二个文本的开头，如下所示

我正在尝试修改权重，但获得的结果不一样。有没有办法通过使用 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
            })
}

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

Row with two Text in Constraint fashion in Jetpack Compose

android

row

android-jetpack-compose