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

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

如果您将文本包裹在方框内并赋予方框权重，那么您将获得所需的内容：

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

Answer 2

您可以将weight修饰符仅应用于长文本。

.weight 修饰符根据元素相对于 Row 中其他加权同级元素的权重按比例调整元素的宽度。 parent将测量未加权的子元素后剩余的横向space进行划分，并按此权重

进行分配
类似于：

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 3

如果您只为文本分配权重，它将占用所有可用的 space，而只留下框所需的 space。我正在复制和编辑@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
            )
        }
    }
}

预览：

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

How to make element fill the remaining space inside a Row or a Column in Jetpack Compose

android

android-jetpack-compose