3

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

潘星宇
  • 31
  • 2

2 Answers2

3

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

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
1

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

Krzysztof S.
  • 91
  • 3
  • I have tried but they cannot scroll together – 潘星宇 Dec 03 '22 at 06:11
  • I did this and it worked. I used one list state, using `rememberLazyListState()`, and passed that list state to both instances of `LazyColumn`. After doing this, the columns scrolled together. – Randy Aug 19 '23 at 12:00