State of Compose 2023 results are in! Click here to learn more

← Back to Foundation

LazyRowForIndexed

Component
in
Foundation
. Since 0.1.0-dev16

Overview

Code Examples

A horizontally scrolling list that only composes and lays out the currently visible items.

It is the variant of LazyRowFor which provides both index and item as params for itemContent.

See LazyColumnForIndexed if you are looking for a vertically scrolling version.

@param items the backing list of data to display. @param modifier the modifier to apply to this layout. @param state the state object to be used to control or observe the list's state. @param contentPadding a padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via modifier param. You can use it to add a padding before the first item or after the last one. If you want to add a spacing between each item use horizontalArrangement. @param reverseLayout reverse the direction of scrolling and layout, when true items will be composed from the end to the start and LazyListState.firstVisibleItemIndex == 0 will mean the first item is located at the end. @param horizontalArrangement The horizontal arrangement of the layout's children. This allows to add a spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size. @param verticalAlignment the vertical alignment applied to the items. @param itemContent emits the UI for an item from items list. It has two params: first one is an index in the items list, and the second one is the item at this index from items list. May emit any number of components, which will be stacked horizontally. Note that LazyRowForIndexed can start scrolling incorrectly if you emit nothing and then lazily recompose with the real content, so even if you load the content asynchronously please reserve some space for the item, for example using Spacer.

Overloads

LazyRowForIndexed

@Composable
@Deprecated(
    "Use LazyRow instead",
    ReplaceWith(
        "LazyRow(modifier, state, contentPadding, verticalAlignment = " +
            "verticalAlignment) { \n itemsIndexed(items, itemContent) \n }",
        "androidx.compose.foundation.lazy.LazyRow",
        "androidx.compose.foundation.lazy.itemsIndexed"
    )
)
fun <T> LazyRowForIndexed(
    items: List<T>,
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    horizontalArrangement: Arrangement.Horizontal =
        if (!reverseLayout) Arrangement.Start else Arrangement.End,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    itemContent: @Composable LazyItemScope.(index: Int, item: T) -> Unit
)

Parameters

NameDescription
itemsthe backing list of data to display.
modifierthe modifier to apply to this layout.
statethe state object to be used to control or observe the list's state.
contentPaddinga padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via modifier param. You can use it to add a padding before the first item or after the last one. If you want to add a spacing between each item use horizontalArrangement.
reverseLayoutreverse the direction of scrolling and layout, when true items will be composed from the end to the start and LazyListState.firstVisibleItemIndex == 0 will mean the first item is located at the end.
horizontalArrangementThe horizontal arrangement of the layout's children. This allows to add a spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size.
verticalAlignmentthe vertical alignment applied to the items.
itemContentemits the UI for an item from items list. It has two params: first one is an index in the items list, and the second one is the item at this index from items list. May emit any number of components, which will be stacked horizontally. Note that LazyRowForIndexed can start scrolling incorrectly if you emit nothing and then lazily recompose with the real content, so even if you load the content asynchronously please reserve some space for the item, for example using Spacer