jetpack compose LazyVerticalStaggeredGrid结合HorizontalPager并且可以上下滑动而且不崩溃
时间: 2024-04-17 12:26:53 浏览: 288
对不起,我之前的回答有误。目前 Jetpack Compose 的 `LazyVerticalStaggeredGrid` 尚未提供内置的滑动功能,因此无法直接实现上下滑动。但是,你可以尝试通过将 `LazyVerticalStaggeredGrid` 嵌套在可滚动的容器中来实现该功能。
以下是一个示例代码,使用 `LazyColumn` 作为外层容器,并在其中嵌套 `LazyVerticalGrid` 来实现瀑布流布局:
```kotlin
@Composable
fun StaggeredGridWithPager(items: List<String>) {
val pagerState = rememberPagerState(pageCount = items.size)
LazyColumn(Modifier.fillMaxHeight()) {
item {
HorizontalPager(
state = pagerState,
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
) {
// 在此添加页面内容
Box(modifier = Modifier.fillMaxSize()) {
val staggeredItems = remember(items, pagerState.currentPage) {
items.chunked(2).getOrNull(pagerState.currentPage) ?: emptyList()
}
LazyVerticalGrid(
cells = GridCells.Fixed(2),
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
) {
items(staggeredItems) { item ->
Text(
text = item,
style = MaterialTheme.typography.subtitle1,
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
)
}
}
}
}
}
}
}
```
在这个示例中,我们将 `LazyVerticalGrid` 嵌套在了 `HorizontalPager` 中,并将它们都放在了 `LazyColumn` 中。这样,就可以实现上下滑动和左右滑动的效果。
希望对你有所帮助!如果还有其他问题,请随时提问。
阅读全文
相关推荐
















