如何使元素填充 Jetpack Compose 中行或列内的剩余空间 [英] How to make element fill the remaining space inside a Row or a Column in Jetpack Compose

问题描述

我试图连续显示两个文本消息，但是当第一个文本的大小很大时，第二个视图被推出屏幕，如下所示:

代码:

I am trying to show two text messages besides each other in a row but when the size of the first text is big, the second view gets pushed out of the screen as shown below:

The code:

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

输出:

推荐答案

您可以将weight 修饰符only 应用于长文本.

You can apply the weight modifier only to the long text.

.weight 修饰符调整元素的宽度与它相对于 Row 中其他加权兄弟元素的权重成比例.父元素将测量未加权的子元素后划分出剩余的水平空间，并根据这个权重进行分配

The .weight modifier sizes the element's width proportional to its weight relative to other weighted sibling elements in the Row. The parent will divide the horizontal space remaining after measuring unweighted child elements and distribute it according to this weight

类似于:

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

这篇关于如何使元素填充 Jetpack Compose 中行或列内的剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！