LazyColumn 内的 LazyVerticalStaggeredGrid 获得无穷大最大高度约束错误

Question

我有一个 LazyColumn，其中包含一个包含 LazyVerticalStaggeredGrid 的项目。默认情况下，该项目的网格不可见，当您点击它时，网格可见。当网格可见时，应用程序崩溃，并且出现以下错误：

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container.

我只想要网格来实现项目在其中的效果。

这是我的代码：

@Composable
fun Test() {

    LazyColumn(
        Modifier.fillMaxSize().padding(vertical = 40.dp, horizontal = 16.dp)
    ) {
        item { MyGrid("Task Monday") }
        item { MyGrid("Task Tuesday") }
    }
}

@Composable
fun MyGrid(text: String) {

    var expanded by remember { mutableStateOf(false) }
    val tasks = listOf<String>(
        "Make the bed",
        "Pick up the clothes",
        "Feed the pet",
        "Clean the dishes",
        "Work out",
    )

    Column(Modifier
        .clickable { expanded = !expanded }
        .padding(horizontal = 8.dp, vertical = 12.dp)) {

        Text(
            text = text, fontSize = 14.sp,
        )

        AnimatedVisibility(expanded) {

            LazyVerticalStaggeredGrid(
                columns = StaggeredGridCells.Adaptive(88.dp),
                verticalItemSpacing = 8.dp,
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                userScrollEnabled = false,
            ) {
                items(tasks) { task ->
                    CardItem(task)
                }
            }
        }
    }
}

给定 LazyVerticalStaggeredGrid 的固定高度，我可以解决这个问题，但我不知道它的高度，因为 CardItem 的高度可能会有所不同。

这是在 LazyVerticalStaggeredGrid 上使用 Modifier.height(300.dp) 的结果

Answer 1

如果您不确定其高度，请在

modifier

中设置最大高度：

modifier = Modifier.heightIn(max = (Short.MAX_VALUE).toInt().dp)