如何使元素填充 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 ..", .....)
    }
}