Jetpack compose LazyGridView 不在 Column 上滚动

Question

尝试将 LazyVerticalGrid 放入可滚动列中时出现以下错误：

java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().

我不是在做一个传统的列表，我只是有很多元素太大而无法显示在屏幕上。因此我希望该列滚动以便我可以看到所有元素。这是我的代码：

Answer 1

您需要使用具有 span 属性的项目。假设您的网格视图每行有三个项目，您可以使用可滚动屏幕将项目放在任何您想要的地方。

LazyVerticalGrid(cells = GridCells.Fixed(4)) {
    item(span = { GridItemSpan(4) }) { Header() }
    item(span = { GridItemSpan(4) }) { AnotherView() }
    items(gridItems) { GridItemView(it) }
}

Answer 2

如果你想让一些 UI 元素粘在顶部或底部，你可以使用修改器。 weight()，例如：

 @Composable
fun SomeScreenContent() {
    val gridItems = List(30){ it.toString() }
    Column(modifier = Modifier.fillMaxSize()) {
        SomeTopContent(modifier = Modifier.weight(0.2f))
        LazyVerticalGrid(
            modifier = Modifier.weight(0.6f),
            columns = GridCells.Fixed(4),
            contentPadding = PaddingValues(8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(gridItems) { item ->
                GridItem(item)
            }
        }
        SomeBottomContent(modifier = Modifier.weight(0.2f))
    }
}


@Composable
fun SomeTopContent(modifier:Modifier = Modifier) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .background(Color(0xff5077FC)),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center
    ) {
        Text(text = "Top")
    }
}

@Composable
fun SomeBottomContent(modifier:Modifier = Modifier) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .background(Color(0xff4EE180)),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center
    ) {
        Text(text = "Bottom")
    }
}

@Composable
fun GridItem(item: String) {
    Card(modifier = Modifier.size(100.dp)) {
        Text(text = item)
    }
}

或者只使用

Scaffold

可组合函数...

Answer 3

如果您需要在垂直滚动

LazyVerticalGrid

内使用

Column

，那么我建议以下解决方案：

Column(
        modifier = Modifier.verticalScroll(rememberScrollState()),
) {
    
    LazyVerticalGrid(
        modifier = Modifier.height(300.dp) // Fixed height
    ){
        ...
    }
}