如何在 Jetpack Compose 中使用带有全宽标题的 LazyColumn 内的 LazyVerticalGrid？

Question

我正在尝试在 Jetpack Compose 中创建一个布局，其中有一个包含全角标题的 LazyColumn 和其下方的 LazyVerticalGrid。网格应包裹其内容高度并占据屏幕的整个宽度。但是，我遇到了布局和滚动行为问题。

错误：java.lang.IllegalStateException：垂直可滚动组件是用无限最大高度约束测量的，这是不允许的。

@Composable
fun ScrollableGridWithHeader() {
    val items = remember { List(20) { "Item #$it" } }

    LazyColumn {
        // Full-width header
        item {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .background(Color.Red),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Upload Images", color = Color.White)
            }
        }

        // LazyVerticalGrid
        item {
            LazyVerticalGrid(
                cells = GridCells.Fixed(2), // or use GridCells.Adaptive(140.dp) if preferred
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                verticalArrangement = Arrangement.spacedBy(8.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                items(items.size) { index ->
                    Box(
                        modifier = Modifier
                            .size(140.dp)
                            .background(Color.Gray),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(text = items[index])
                    }
                }
            }
        }
    }
}

Answer 1

您的要求对我来说不太清楚，但如果您想在

LazyVerticalGrid

的顶部包含一个全角标题，该标题也随内容滚动，您可以使用

span

作为

item 

像这样：

@Composable
fun ScrollableGridWithHeader() {

    val items = remember { List(20) { "Item #$it" } }

    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        item(span = { GridItemSpan(maxLineSpan) }) {  // let item span across all columns in Grid
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .background(Color.Red),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Upload Images", color = Color.White)
            }
        }
        items(items.size) { index ->
            Box(
                modifier = Modifier
                    .size(140.dp)
                    .background(Color.Gray),
                contentAlignment = Alignment.Center
            ) {
                Text(text = items[index])
            }
        }
    }
}

另请注意，在最新的 Compose 版本中，

LazyVerticalGrid

采用

columns

参数而不是

cells

。

输出：