如何在 jetpack compose 中向 LazyVerticalGrid 添加一个 stickyHeader，例如 LazyColumn？

Question

我想实现这样的UI效果：

<GridView>
    <Title of Grid content in a single row />
    <Grid content arranged in the form of n * 3 />

    <Title of Grid content in a single row />
    <Grid content arranged in the form of n * 3 />

    <Title of Grid content in a single row />
    <Grid content arranged in the form of n * 3 />
</GridView>

但我无法将该行添加到 LazyColumnGrid。

我尝试使用带有垂直滚动的列周围的 LazyColumnGrid，但它说it's wrong to nest two scrollable views in the same direction.

此外，我尝试在<Title of Grid />上使用item{ } ，但这使得item{ }成为 gridview 中的项目，而不是单行。

那么我怎样才能以简单的方式实现这一目标呢？

Answer 1

您不能真正使用 Compose 的 LazyGrid api 创建一个粘性 header，但您可以创建一个 header，如下所示：

fun LazyGridScope.header(
    content: @Composable LazyGridItemScope.() -> Unit
) {
    item(span = { GridItemSpan(this.maxLineSpan) }, content = content)
}

该代码使用带有this.maxLineSpan的 span 块，它变成了全宽 header。

所以，你可以像这样使用它

LazyVerticalGrid(
    ...
) {
    header {
        Text("Header Title") // or any composable for your single row
    }
    items(count = n * 3) {
        GridItem() 
    }


    header {
        Text("Header Title") // or any composable for your single row
    }
    items(count = n * 3) {
        GridItem() 
    }
    
}

---

奖金你也可以通过这种方式抵消你的细胞

fun LazyGridScope.offSetCells(count: Int) {
    item(span = { GridItemSpan(count) }) {}
}

...

LazyVerticalGrid(
   ...
) {
    offsetCells(count = 3)
}

Answer 2

当前可用的方法是在没有nested scrolling情况下实现它。

LazyColumn {
    grouped.forEach { (headText, allGrids) ->
        stickyHeader {
            //Sticky Heading
            Text(text = "Starting with $headText");
        }
        items(allGrids) { grid ->
            // Implement <Grid content- n*3 /> without scrolling

            // Method 1: Rows & .forEach{ }
            Row {
             name.forEach { gridItem ->
               // implement gridItem
               Text(
                 gridItem.toString(),
                 modifier = Modifier
                   .border(BorderStroke(2.dp, Color.LightGray))
                   .padding(15.dp)
                   .fillParentMaxWidth(0.3f)
                )
               }
             }

            // Method 2: Using basic Column & Rows
        }
    }
}

输出