Jetpack Compose如何使两个惰性列同时滚动

Question

我希望在屏幕上有两列卡片流，数据从网络分页获取。我尝试使用两个带有启动效果的lazy column。（参考：同时滚动两个lazy scrollers），但是卡片的高度不同，因此我不能直接使用firstVisibleItemScrollOffset和firstVisibleItemIndex。如果我使用lazyGrid，则卡片的高度不能不同。如何实现这样的双列卡片流页面？

目标数据流页面请参见此处。

当使用Jetpack Compose时，如何使两个Lazy Column一起滚动或将Swipe Refresh Layout与Column组合？

- 潘星宇

Answer 1

只需使用LazyVerticalStaggeredGrid即可。

就像这样：

val state = rememberLazyStaggeredGridState()

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(2),
    modifier = Modifier.fillMaxSize(),
    state = state,
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(10.dp),
    content = {

        items(count) {
            //item content
        }
    }
)

- Gabriele Mariotti

Answer 2

你尝试过将相同的LazyListState作为参数同时传递给两个LazyColumns吗？

- Krzysztof S.

---

我已经尝试过，但它们无法一起滚动。 - 潘星宇

我做了这个并且它起作用了。我使用了一个列表状态，使用rememberLazyListState()，并将该列表状态传递给了两个LazyColumn的实例。在这样做之后，这两个列一起滚动。 - Randy