Is there a way for lazy loading with FlowRow?

1.9k Views Asked by At

I use FlowRow in the accompanist project to auto wrap my text items to next line. It works as intended. However, when I have a large dataset (which I already load with paging), I don't find an api like LazyColumn to load and build the items as needed, if I loop through the pager flow, it tries to load to build everything at once. Any adice please?

lazyPagingItems = pager.flow.collectAsLazyPagingItems()

FlowRow(
 ) {
    val items = lazyPagingItems
    for (index in 1..items.itemCount-1) {
        Text(
            text = word,
            maxLines = 1
        )
    }
}
2

There are 2 best solutions below

0
On

There's now have a lazy loading component called ContextualFlowRow and ContextualFlowColumn.

It lazy loads until the maxLines or maxHeight.

@Composable
@ExperimentalLayoutApi
fun ContextualFlowRow(
    itemCount: Int,
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    maxItemsInEachRow: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    overflow: ContextualFlowRowOverflow = ContextualFlowRowOverflow.Clip,
    content: @Composable ContextualFlowRowScope.(index: Int) -> Unit
): Unit

Link

0
On

Little late to the party. But it seems you could use LazyVerticalGrid or LazyHorizontalGrid in adaptive mode like below.

LazyVerticalGrid(
    columns = GridCells.Adaptive(/* item min size */)
) {
    // Items
}