LazyColumn in Jetpack Compose — was es ist, Eigenschaften und wie es funktioniert

Was ist LazyColumn in Jetpack Compose

LazyColumn ist eine Composable-Funktion, die eine vertikale scrollbare Liste mit Lazy Loading implementiert. Im Gegensatz zu Column, das alle untergeordneten Elemente auf einmal rendert, erstellt LazyColumn nur Elemente, die sich im Ansichtsbereich befinden.

Der Lazy-Loading-Mechanismus in LazyColumn basiert auf der Wiederverwendung von Elementen: Wenn ein Element beim Scrollen ausgeblendet wird, können seine Komposition und sein Layout für ein neu angezeigtes Element wiederverwendet werden. Dies spart Speicher und CPU-Zeit, insbesondere bei langen Listen.

Laut Android Developers Blog, 2024 kann LazyColumn Listen mit Zehntausenden von Elementen effizient verarbeiten, ohne dass die Leistung signifikant beeinträchtigt wird. Jedes Element in LazyColumn hat einen Schlüssel (key), der Compose hilft, den Zustand des Elements zu identifizieren und zu bewahren, wenn sich die Liste ändert.

Grundlegende Signatur von LazyColumn

LazyColumn akzeptiert die Parameter modifier, state, contentPadding, reverseLayout, verticalArrangement und horizontalAlignment. Der Inhalt wird in einem Lambda-Block über die DSL-Funktionen items und item definiert.

@Composable
fun SimpleLazyColumn() {
    val itemsList = (1..100).toList()
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(itemsList) { item ->
            Text(text = "Element $item")
        }
    }
}

LazyColumn-Parameter: items und item

Der DSL-Block von LazyColumn stellt die Funktionen items und item zum Hinzufügen von Inhalten bereit. items akzeptiert eine Datensammlung, einen Schlüssel und eine Factory-Funktion zum Erstellen von Elementen. item fügt ein einzelnes statisches Element zur Liste hinzu.

itemsIndexed ist eine Variante von items, die zusätzlich zu den Daten den Elementindex übergibt. Dies ist nützlich, wenn Sie die Position des Elements ohne separate Berechnung kennen müssen. items(size) akzeptiert nur die Anzahl der Elemente und eine Factory ohne Bindung an eine Sammlung.

Der Parameter key in items identifiziert jedes Element eindeutig. Laut Material Design Guidelines, 2025 verbessern Schlüssel die Leistung beim Aktualisieren und Animieren von Elementen, da Compose die Bewegung oder Änderung eines bestimmten Elements anhand seines Schlüssels verfolgen kann.

Beispiel mit verschiedenen Elementtypen

Die Funktion items mit contentType ermöglicht es LazyColumn, die Wiederverwendung von Elementen verschiedener Typen zu optimieren. Im folgenden Beispiel werden Abschnittsüberschriften und normale Zeilen in einer einzigen Liste verwendet.

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "Kopfzeile",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "Zeile $item")
        }
    }
}

LazyListState und Scroll-Management

LazyListState ist ein Zustandsobjekt von LazyColumn, das die aktuelle Scrollposition, das erste sichtbare Element und den Offset verfolgt. Es kann über rememberLazyListState() erstellt und an den state-Parameter von LazyColumn übergeben werden.

LazyListState bietet die Methoden animateScrollToItem und scrollToItem zum programmatischen Scrollen zu einem bestimmten Element. animateScrollToItem erzeugt eine sanfte Scroll-Animation, während scrollToItem sofort scrollt. Beide Methoden müssen innerhalb einer Koroutine im CompositionContext aufgerufen werden.

Laut Android Developers, 2024 enthält LazyListState auch layoutInfo, das Informationen über die sichtbaren Elemente liefert — deren Indizes, Offsets und Größen. Dies ist nützlich für die Implementierung von Analysen, View-Tracking oder unendlichem Scrollen.

Beispiel mit programmatischem Scrollen

In diesem Beispiel wird LazyColumn über LazyListState gesteuert. Ein Button scrollt die Liste mit einer sanften Animation zum Element mit Index 50.

@Composable
fun ScrollableList() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("Zu 50 scrollen")
        }

        LazyColumn(state = listState) {
            items((1..100).toList()) { item ->
                Text(
                    text = "Element $item",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

Leistungsoptimierung von LazyColumn

Der wichtigste Leistungsfaktor von LazyColumn ist die korrekte Verwendung von Schlüsseln. Jedes Element sollte über den key-Parameter einen eindeutigen stabilen Schlüssel haben. Ohne Schlüssel kann Compose Elemente bei Datenänderungen nicht korrekt wiederverwenden, was zu Rekomposition führt.

contentType teilt LazyColumn mit, welche Elemente denselben Layout-Typ haben. Wenn zwei Elemente mit demselben contentType in den Wiederverwendungspool gelangen, kann LazyColumn ihr Layout ohne Rekomposition wiederverwenden. Laut Android Developers Blog, 2024 verbessert contentType die Leistung um 30–50% in Listen mit verschiedenen Elementtypen.

Für LazyColumn ist es auch wichtig, instabile Parameter in Factory-Funktionen zu vermeiden. Jedes Mal, wenn sich ein Elementparameter ändert, komponiert Compose dieses Element neu. Die Verwendung von remember und derivedStateOf für stabile Werte reduziert die Anzahl der Rekompositionen.

Tabelle der Leistungsfaktoren

Sticky headers und Abschnitte in LazyColumn

stickyHeader ist eine DSL-Funktion von LazyColumn, die eine Abschnittsüberschrift beim Scrollen am oberen Rand der Liste fixiert. Wenn der nächste Abschnitt den oberen Rand erreicht, ersetzt seine Überschrift die aktuelle. Dieses Verhalten ist Benutzern von Kontaktlisten und Kalendern vertraut.

stickyHeader akzeptiert einen Schlüssel und eine Factory-Funktion, ähnlich wie item. Im Gegensatz zu einem normalen item bleibt stickyHeader sichtbar, während durch den Inhalt seines Abschnitts gescrollt wird. Wenn ein Abschnitt vollständig gescrollt ist, schiebt die Überschrift des nächsten Abschnitts die vorherige hinaus.

Laut Material Design Guidelines, 2025 verbessern sticky header die Navigation in langen Listen und reduzieren die kognitive Belastung des Benutzers. Um einen sticky header zu implementieren, umschließen Sie einfach eine Abschnittsüberschrift in der richtigen Position relativ zu den items-Elementen mit stickyHeader.

@Composable
fun SectionedList(sections: Map<String, List<String>>) {
    LazyColumn {
        sections.forEach { (header, items) ->
            stickyHeader {
                Text(
                    text = header,
                    modifier = Modifier.background(Color.White)
                        .padding(16.dp)
                )
            }
            items(items) { item ->
                Text(text = item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}