android - JetPack Compose - Card 中 Row 中的 weight() 不起作用

Question

在创建 Android 应用程序时，我将一些可组合项放在卡片的一行中，如下所示，但它并没有像我预期的那样工作。我放置“weight(1f)”的可组合项不再显示。

data class Test(
    val title: String,
    val text: String
)

@Composable
fun CardRowSample(
    modifier: Modifier = Modifier,
) {
    val testList =
        listOf(
            Test("AAAA", "1,2,3,4,5,6,7,8,9,10"),
            Test("BBBB", "11,12,13,14,15,16,17,18,19,20")
        )

    LazyColumn(
        modifier = modifier
    ) {
         items(
             items = testList
         ) {
             test ->
                Card(
                    elevation = 12.dp,
                    backgroundColor = Color.LightGray,
                    modifier = Modifier
                        .fillMaxWidth()
                        .heightIn(min = 50.dp)
                        .width(40.dp)
                        .requiredHeight(intrinsicSize = IntrinsicSize.Min)
                        .padding(
                            horizontal = 20.dp,
                            vertical = 20.dp
                        )
                        .border(
                            width = 1.dp,
                            color = Color.Black,
                            shape = RectangleShape
                        )
                ) {
                    Row(
                        modifier = Modifier.fillMaxWidth()
                    ) {

                        Icon(
                            modifier = Modifier
                                .padding(horizontal = 5.dp)
                                .align(Alignment.CenterVertically),
                            imageVector = Icons.Filled.Check,
                            contentDescription = null
                        )

                        Text(
                            text = test.title,
                            fontSize = 20.sp,
                            modifier =
                            Modifier
                                .width(120.dp)
                                .padding(horizontal = 10.dp, vertical = 10.dp)
                        )

                        Text(
                            text = test.text,
                            fontSize = 20.sp,
                            modifier = Modifier
                                .weight(1f)//it doesn't work!!
                                .padding(horizontal = 10.dp, vertical = 10.dp)
                        )
                    }
                }
        }
    }
}

---

我理想的布局形象:

---

我引用以下问题编写了代码，Weights in Jetpack compose ，但我不明白为什么会这样。我对所有内容都加上了“权重”，并将 fillParentMaxSize 添加到 Row 的修饰符中，但我无法解决这个问题。

接下来我应该怎么做才能解决这个问题？

Answer 1

问题不在于 Modifier.weight(1f)。这是因为 Modifier.requiredHeight(IntrinsicSize.Min)

Card(
    elevation = 12.dp,
    backgroundColor = Color.LightGray,
    modifier = Modifier
        .fillMaxWidth()
        .heightIn(min = 50.dp)
//                    .width(40.dp)
//                    .requiredHeight(intrinsicSize = IntrinsicSize.Min)
        .padding(
            horizontal = 20.dp,
            vertical = 20.dp
        )
        .border(
            width = 1.dp,
            color = Color.Black,
            shape = RectangleShape
        )
) 

此外，Modifier.width(40.dp) 是多余的，因为在此之前您还有另一个宽度修饰符 Modifier.fillMaxWidth()。

当 Modifier.requiredIn 带有内在大小修饰符时，行为很奇怪。 Composable 被测量两次并带有 Infinity 约束

LAYOUT constraints: Constraints(minWidth = 0, maxWidth = 1080, minHeight = 0, maxHeight = Infinity), width: 1080, height: 235
LAYOUT constraints: Constraints(minWidth = 0, maxWidth = Infinity, minHeight = 235, maxHeight = 235), width: 510, height: 235

由于 maxWidth = Infinity，这是第二次测量中断宽度。 1080px 在我的设备上是全宽

查看您可以使用的 Constrains 和 Composable 宽度和高度

Card(
    elevation = 12.dp,
    backgroundColor = Color.LightGray,
    modifier = Modifier
        .fillMaxWidth()
        .heightIn(min = 50.dp)
//                    .width(40.dp)
                    .requiredHeight(intrinsicSize = IntrinsicSize.Min)
        .layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            println("LAYOUT constraints: $constraints, width: ${placeable.width}, height: ${placeable.height}")
            layout(placeable.width,placeable.height){
                placeable.placeRelative(0,0)
            }
        }
        .padding(
            horizontal = 20.dp,
            vertical = 20.dp
        )
        .border(
            width = 1.dp,
            color = Color.Black,
            shape = RectangleShape
        )
)