如何在 Jetpack Compose 中使元素填充 Row 或 Column 中的剩余空间

Question

我想在一行中展示两条短信，但是当第一条的文本比较长时，第二条就会被挤出屏幕，如下所示：

代码如下：

Row(modifier = Modifier.fillMaxWidth()) {
    Text(
        text = "safasfasdfsasdssdsaasdsadsdsaasdsasdsasdasddassdsssdasdadsasdasdsd",
        modifier = Modifier
            .padding(top = 12.dp, bottom = 12.dp, end = 12.dp, start = 10.dp)
            .background(Color.Gray)
    )
    Text(
        text = "12:00 am",
        style = messageTimeTextStyle,
        modifier = Modifier
            .padding(horizontal = 16.dp),
        maxLines = 1
    )
}

输出结果：

- David Ibrahim

Answer 1

您只能将weight修饰符仅应用于长文本。

.weight修饰符将元素的宽度按其相对于Row中其他加权兄弟元素的权重调整大小。父级将在测量未加权子元素后分配剩余的水平空间，并根据此权重进行分配。

类似于：

Row() {
    Text(text = "safasfasdfsasdssdsaasdsadsdsaasdsasdsasdasddassdsssdasdadsasdasdsd",
        Modifier
            .padding(top = 12.dp, bottom = 12.dp, end = 12.dp, start = 10.dp)
            .background(Color.Gray)
            .weight(1f)
         )
    Text(
        text = "12:00 am",
        modifier = Modifier
            .padding(horizontal = 16.dp),
        maxLines = 1
    )
}

或者

Row() {
    Column(Modifier.weight(1f)){
        Text(text = "safasfasdfsasdssdsaasdsadsdsa.." , ....)
    }
    Column() {
        Text( text = "12.00 ..", .....)
    }
}

- Gabriele Mariotti

---

如果我的较长文本在运行时消失了，会发生什么？我仍希望第二段文本保留在结尾。这是否可能？ - Sarah Khan

@SarahKhan 我相信第二个文本将保持在末尾，因为 Modifier.weight(1f) 应用于 Column 而不是 Text 组合本身。 - Arthur Kasparian

Answer 2

如果您将文本放入框中并赋予框边框，那么您就可以得到您想要的效果：

Row(modifier = Modifier.fillMaxWidth()) {
        Box(Modifier.weight(2f)) {
            Text(
                text = "safasfasdfsasdssdsaasdsafasfasdfsasdssdsaasdsafasfasdfsasdssdsaasd",
                Modifier
                    .padding(top = 12.dp, bottom = 12.dp, end = 12.dp, start = 10.dp)
                    .background(Color.Gray)
            )
        }
        Box(Modifier.weight(1f)) {
            Text(
                text = "12:00 am",
                modifier = Modifier
                    .padding(horizontal = 16.dp),
                maxLines = 1
            )
        }
    }

- Code Poet

---

是的，我完全可以做到，但是我希望第一个文本占用所有可用空间，并仅为第二个视图留出空间，就像普通LinearLayout所预期的那样。 - David Ibrahim

Answer 3

如果您只为文本分配权重，它将占用所有可用空间，并仅留下所需的框所需的足够空间。我正在复制并编辑来自@Code Poet的上面回复中相同的代码。

    Row(modifier = Modifier.fillMaxWidth()) {
        Box(Modifier.weight(2f)) {
            Text(
                text = "safasfasdfsasdssdsaasdsafasfasdfsasdssdsaasdsafasfasdfsasdssdsaasd",
                Modifier
                    .padding(top = 12.dp, bottom = 12.dp, end = 12.dp, start = 10.dp)
                    .background(Color.Gray)
            )
        }
        Box {
            Text(
                text = "12:00 am",
                maxLines = 1
            )
        }
    }
}

预览：

- Nishikant Choudhary