JetPack Compose - 卡中行中的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 带有内在大小修饰符时，行为会很奇怪。可组合项被测量两次并具有无限约束

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 是我设备上的全宽

查看可以使用的约束和可组合宽度和高度

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