主页 / coding / 问题 / 79118163
Accepted
Santhosh Kumar
Asked: 2024-10-23 21:36:28 +0800 CST

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

  • 772

我正在尝试在 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])
                    }
                }
            }
        }
    }
}
kotlin

1 个回答

  1. Best Answer

    如果不为嵌套的 Composable 设置固定高度，则无法将垂直滚动的 Composable 放在另一个垂直滚动的 Composable 中。不过，对于您的情况，我建议采用替代解决方案。

    如果您想要包含一个显示在顶部的全宽标题，并且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。

    输出：

    截屏

    • 2

相关问题