Build apps faster with over 150+ styled components and screens! Check it out →

LazyColumn

Common

Component in Compose Foundation

The vertically scrolling list that only composes and lays out the currently visible items. The [content] block defines a DSL which allows you to emit items of different types. For example you can use [LazyListScope.item] to add a single item and [LazyListScope.items] to add a list of items.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.8.0-beta01")
}

Overloads

@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical =
        if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: LazyListScope.() -> Unit
)

Parameters

namedescription
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 [verticalArrangement].
reverseLayoutreverse the direction of scrolling and layout. When true, items are laid out in the reverse order and [LazyListState.firstVisibleItemIndex] == 0 means that column is scrolled to the bottom. Note that [reverseLayout] does not change the behavior of [verticalArrangement], e.g. with [Arrangement.Top] (top) 123### (bottom) becomes (top) 321### (bottom).
verticalArrangementThe vertical 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.
horizontalAlignmentthe horizontal alignment applied to the items.
flingBehaviorlogic describing fling behavior.
userScrollEnabledwhether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled
overscrollEffectthe [OverscrollEffect] that will be used to render overscroll for this layout. Note that the [OverscrollEffect.node] will be applied internally as well - you do not need to use Modifier.overscroll separately.
contenta block which describes the content. Inside this block you can use methods like [LazyListScope.item] to add a single item or [LazyListScope.items] to add a list of items.
@Deprecated("Use the non deprecated overload", level = DeprecationLevel.HIDDEN)
@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical =
        if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyListScope.() -> Unit
)
@Deprecated("Use the non deprecated overload", level = DeprecationLevel.HIDDEN)
@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical =
        if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    content: LazyListScope.() -> Unit
)

Code Example

LazyColumnSample

@Composable
fun LazyColumnSample() {
    val itemsList = (0..5).toList()
    val itemsIndexedList = listOf("A", "B", "C")

    LazyColumn {
        items(itemsList) { Text("Item is $it") }

        item { Text("Single item") }

        itemsIndexed(itemsIndexedList) { index, item -> Text("Item at index $index is $item") }
    }
}
by @alexstyl