[英]How can I add a stickyHeader to LazyVerticalGrid like LazyColumn in jetpack compose?
I want to achieve a UI effect like this:我想实现这样的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>
But I am not able to add the row to the LazyColumnGrid.但我无法将该行添加到 LazyColumnGrid。
I tried using the LazyColumnGrid around Column with vertical scroll, but it says it's wrong to nest two scrollable views in the same direction.
我尝试使用带有垂直滚动的列周围的 LazyColumnGrid,但它说
it's wrong to nest two scrollable views in the same direction.
Also, I tried to use item{ }
on <Title of Grid />
, but that made item{ }
an item in the gridview, not a single row.此外,我尝试在
<Title of Grid />
上使用item{ }
,但这使得item{ }
成为 gridview 中的项目,而不是单行。
So how can I achieve this in a simple way?那么我怎样才能以简单的方式实现这一目标呢?
You can't really create a sticky header with Compose's LazyGrid apis, but you can create a header as follow:您不能真正使用 Compose 的 LazyGrid api 创建一个粘性 header,但您可以创建一个 header,如下所示:
fun LazyGridScope.header(
content: @Composable LazyGridItemScope.() -> Unit
) {
item(span = { GridItemSpan(this.maxLineSpan) }, content = content)
}
The code uses the span block with this.maxLineSpan
which becomes a full-width header.该代码使用带有
this.maxLineSpan
的 span 块,它变成了全宽 header。
So, you can use it like this所以,你可以像这样使用它
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()
}
}
BONUS You can also offset your cells this way奖金你也可以通过这种方式抵消你的细胞
fun LazyGridScope.offSetCells(count: Int) {
item(span = { GridItemSpan(count) }) {}
}
...
LazyVerticalGrid(
...
) {
offsetCells(count = 3)
}
The currently available way is to implement it without the nested scrolling
at all.当前可用的方法是在没有
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
}
}
}
Output输出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.