Jetpack compose how to make two lazy columns scroll together

Question

I want to have two columns of card flow in the screen with paging data from network. I have tried using two lazy columns with launch effects. (ref: Scroll Two Lazy Scrollers Together ), however, the height of card is different so I cannot use the firstVisibleItemScrollOffset and firstVisibleItemIndex directly. If I use lazyGrid, the height of the card cannot be different. How to implement a two-column card flow page like this?

target data flow page

how to make two lazy column scroll together or combine swipe refresh layout with column when using jetpack compose

Answer 1

Have you tried to pass as an argument the same LazyListState to both LazyColumns?

Answer 2

Just use a LazyVerticalStaggeredGrid .

Something like:

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
        }
    }
)