如何使元素填充Jetpack Compose中行或列中的剩余空间

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

输出：

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

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