[SOLVED] Jetpack compose how to make two lazy columns scroll together

Jetpack compose how to make two lazy columns scroll together

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

Solution

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