Listen und Raster

Viele Apps müssen Sammlungen von Elementen anzeigen. In diesem Dokument wird beschrieben, wie Sie dies in Jetpack Compose effizient tun können.

Wenn Sie wissen, dass für Ihren Anwendungsfall kein Scrollen erforderlich ist, können Sie ein einfaches Column oder Row (je nach Richtung) verwenden und die Inhalte der einzelnen Elemente ausgeben, indem Sie auf folgende Weise über eine Liste iterieren:

@Composable
fun MessageList(messages: List<Message>) {
    Column {
        messages.forEach { message ->
            MessageRow(message)
        }
    }
}
LazyListSnippets.kt

Mit dem Modifikator verticalScroll() können wir Column scrollbar machen.

Lazy-Listen

Wenn Sie eine große Anzahl von Elementen (oder eine Liste mit unbekannter Länge) anzeigen möchten, kann die Verwendung eines Layouts wie Column zu Leistungsproblemen führen, da alle Elemente zusammengesetzt und angeordnet werden, unabhängig davon, ob sie sichtbar sind oder nicht.

Compose bietet eine Reihe von Komponenten, die nur Elemente zusammenstellen und layouten, die im Darstellungsbereich der Komponente sichtbar sind. Dazu gehören LazyColumn und LazyRow.

Wie der Name schon sagt, besteht der Unterschied zwischen LazyColumn und LazyRow in der Ausrichtung, in der die Elemente angeordnet und gescrollt werden. Mit LazyColumn wird eine vertikal scrollbare Liste und mit LazyRow eine horizontal scrollbare Liste erzeugt.

Die Lazy-Komponenten unterscheiden sich von den meisten Layouts in Compose. Anstatt einen @Composable-Inhaltsblockparameter zu akzeptieren, mit dem Apps direkt Composables ausgeben können, bieten die Lazy-Komponenten einen LazyListScope.()-Block. Dieser LazyListScope-Block bietet eine DSL, mit der Apps den Inhalt des Artikels beschreiben können. Die Lazy-Komponente ist dann dafür verantwortlich, den Inhalt der einzelnen Elemente entsprechend dem Layout und der Scrollposition hinzuzufügen.

LazyListScope DSL

Die DSL von LazyListScope bietet eine Reihe von Funktionen zum Beschreiben von Elementen im Layout. Im einfachsten Fall fügt item() ein einzelnes Element hinzu und items(Int) mehrere Elemente:

LazyColumn {
    // Add a single item
    item {
        Text(text = "First item")
    }

    // Add 5 items
    items(5) { index ->
        Text(text = "Item: $index")
    }

    // Add another single item
    item {
        Text(text = "Last item")
    }
}
LazyListSnippets.kt

Es gibt auch eine Reihe von Erweiterungsfunktionen, mit denen Sie Sammlungen von Elementen hinzufügen können, z. B. eine List. Mit diesen Erweiterungen können wir unser Beispiel Column oben ganz einfach migrieren:

/**
 * import androidx.compose.foundation.lazy.items
 */
LazyColumn {
    items(messages) { message ->
        MessageRow(message)
    }
}
LazyListSnippets.kt

Es gibt auch eine Variante der Erweiterungsfunktion items(), die den Index liefert: itemsIndexed(). Weitere Informationen finden Sie in der Referenz LazyListScope.

Lazy Grids

Die Composeables LazyVerticalGrid und LazyHorizontalGrid unterstützen die Anzeige von Elementen in einem Raster. In einem Lazy Vertical Grid werden die Elemente in einem vertikal scrollbaren Container angezeigt, der sich über mehrere Spalten erstreckt. Bei Lazy Horizontal Grids verhält es sich auf der horizontalen Achse genauso.

Raster haben dieselben leistungsstarken API-Funktionen wie Listen und verwenden auch eine sehr ähnliche DSL (LazyGridScope.()), um den Inhalt zu beschreiben.

Screenshot eines Smartphones mit einem Raster von Fotos

Mit dem Parameter columns in LazyVerticalGrid und dem Parameter rows in LazyHorizontalGrid wird festgelegt, wie Zellen in Spalten oder Zeilen angeordnet werden. Im folgenden Beispiel werden Elemente in einem Raster angezeigt. Mit GridCells.Adaptive wird festgelegt, dass jede Spalte mindestens 128.dp breit sein muss:

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 128.dp)
) {
    items(photos) { photo ->
        PhotoItem(photo)
    }
}
LazyListSnippets.kt

Mit LazyVerticalGrid können Sie eine Breite für Elemente angeben. Das Raster passt dann so gut wie möglich auf die Anzahl der Spalten. Die verbleibende Breite wird gleichmäßig auf die Spalten verteilt, nachdem die Anzahl der Spalten berechnet wurde. Diese adaptive Größenanpassung ist besonders nützlich, wenn mehrere Elemente auf verschiedenen Bildschirmgrößen angezeigt werden sollen.

Wenn Sie die genaue Anzahl der zu verwendenden Spalten kennen, können Sie stattdessen eine Instanz von GridCells.Fixed mit der Anzahl der erforderlichen Spalten angeben.

Wenn für Ihr Design nur bestimmte Elemente nicht standardmäßige Abmessungen haben müssen, können Sie die Rasterunterstützung verwenden, um benutzerdefinierte Spaltenabstände für Elemente festzulegen. Geben Sie die Spaltenspanne mit dem Parameter span der Methoden LazyGridScope DSL item und items an. maxLineSpan, einer der Werte für den Bereichsumfang, ist besonders nützlich, wenn Sie die adaptive Größe verwenden, da die Anzahl der Spalten nicht festgelegt ist. In diesem Beispiel wird gezeigt, wie eine volle Zeilenspanne angegeben wird:

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 30.dp)
) {
    item(span = {
        // LazyGridItemSpanScope:
        // maxLineSpan
        GridItemSpan(maxLineSpan)
    }) {
        CategoryCard("Fruits")
    }
    // ...
}
LazyListSnippets.kt

Lazy staggered grid

LazyVerticalStaggeredGrid und LazyHorizontalStaggeredGrid sind Composeables, mit denen Sie ein Lazy-Load-Staggered-Grid mit Elementen erstellen können. In einem Lazy Vertical Staggered Grid werden die Elemente in einem vertikal scrollbaren Container angezeigt, der sich über mehrere Spalten erstreckt und es ermöglicht, dass einzelne Elemente unterschiedliche Höhen haben. Bei Lazy Horizontal Grids verhalten sich Elemente mit unterschiedlicher Breite auf der horizontalen Achse gleich.

Das folgende Snippet ist ein einfaches Beispiel für die Verwendung von LazyVerticalStaggeredGrid mit einer Breite von 200.dp pro Element:

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Adaptive(200.dp),
    verticalItemSpacing = 4.dp,
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    content = {
        items(randomSizedPhotos) { photo ->
            AsyncImage(
                model = photo,
                contentScale = ContentScale.Crop,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
            )
        }
    },
    modifier = Modifier.fillMaxSize()
)
LazyListSnippets.kt

Abbildung 1. Beispiel für ein Lazy-Staggered-Vertikal-Raster

Wenn Sie eine feste Anzahl von Spalten festlegen möchten, können Sie anstelle von StaggeredGridCells.Adaptive die Zahl StaggeredGridCells.Fixed(columns) verwenden. Dabei wird die verfügbare Breite durch die Anzahl der Spalten (oder Zeilen bei einem horizontalen Raster) geteilt und jedes Element nimmt diese Breite (oder Höhe bei einem horizontalen Raster) ein:

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(3),
    verticalItemSpacing = 4.dp,
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    content = {
        items(randomSizedPhotos) { photo ->
            AsyncImage(
                model = photo,
                contentScale = ContentScale.Crop,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
            )
        }
    },
    modifier = Modifier.fillMaxSize()
)
LazyListSnippets.kt
Lazy-Lade-Raster mit Bildern in der Bildkomposition
Abbildung 2. Beispiel für ein Lazy-Staggered-vertikales Raster mit festen Spalten

Textabstand

Manchmal müssen Sie den Inhalt mit einem Abstand versehen. Mit den Lazy-Komponenten kannst du dem contentPadding-Parameter einige PaddingValues übergeben, um dies zu unterstützen:

LazyColumn(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {
    // ...
}
LazyListSnippets.kt

In diesem Beispiel fügen wir den horizontalen Rändern (links und rechts) einen Abstand von 16.dp und dann oben und unten an den Inhalten einen Abstand von 8.dp hinzu.

Hinweis: Dieser Abstand wird auf den Inhalt und nicht auf die LazyColumn selbst angewendet. Im Beispiel oben wird dem ersten Element oben ein Abstand von 8.dp hinzugefügt, dem letzten Element unten 8.dp und allen Elementen links und rechts 16.dp.

Ein weiteres Beispiel: Sie können die PaddingValues von Scaffold an die contentPadding von LazyColumn übergeben. Weitere Informationen finden Sie im Leitfaden für randlose Displays.

Abstand zwischen Inhalten

Mit Arrangement.spacedBy() können Sie Abstände zwischen Elementen hinzufügen. Im folgenden Beispiel wird zwischen den einzelnen Elementen ein Abstand von 4.dp hinzugefügt:

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}
LazyListSnippets.kt

Ähnlich für LazyRow:

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}
LazyListSnippets.kt

Raster können jedoch sowohl vertikal als auch horizontal angeordnet werden:

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(photos) { item ->
        PhotoItem(item)
    }
}
LazyListSnippets.kt

Artikelschlüssel

Standardmäßig wird der Status jedes Elements anhand der Position des Elements in der Liste oder im Raster festgelegt. Dies kann jedoch zu Problemen führen, wenn sich der Datensatz ändert, da Elemente, die ihre Position ändern, ihren gespeicherten Status verlieren. Stellen Sie sich das Szenario von LazyRow in einer LazyColumn vor. Wenn sich die Artikelposition in der Zeile ändert, verliert der Nutzer seine Scrollposition innerhalb der Zeile.

Um dies zu vermeiden, können Sie für jedes Element einen stabilen und eindeutigen Schlüssel angeben, der dem key-Parameter einen Block zuweist. Wenn Sie einen stabilen Schlüssel angeben, bleibt der Artikelstatus bei Änderungen des Datensatzes konsistent:

LazyColumn {
    items(
        items = messages,
        key = { message ->
            // Return a stable + unique key for the item
            message.id
        }
    ) { message ->
        MessageRow(message)
    }
}
LazyListSnippets.kt

Wenn Sie Schlüssel angeben, kann Compose die Neuanordnung korrekt verarbeiten. Wenn Ihr Element beispielsweise einen gespeicherten Status enthält, können Sie mithilfe von Schlüsseln festlegen, dass Compose diesen Status zusammen mit dem Element verschiebt, wenn sich seine Position ändert.

LazyColumn {
    items(books, key = { it.id }) {
        val rememberedValue = remember {
            Random.nextInt()
        }
    }
}
LazyListSnippets.kt

Es gibt jedoch eine Einschränkung bei den Typen, die Sie als Artikelschlüssel verwenden können. Der Schlüsseltyp muss von Bundle unterstützt werden, dem Android-Mechanismus zum Beibehalten der Status, wenn die Aktivität neu erstellt wird. Bundle unterstützt Typen wie primitive Typen, Enumerationen oder Parcelables.

LazyColumn {
    items(books, key = {
        // primitives, enums, Parcelable, etc.
    }) {
        // ...
    }
}
LazyListSnippets.kt

Der Schlüssel muss von Bundle unterstützt werden, damit die rememberSaveable im Artikel-Komposit wiederhergestellt werden kann, wenn die Aktivität neu erstellt wird, oder sogar, wenn Sie von diesem Artikel weg- und wieder zurückscrollen.

LazyColumn {
    items(books, key = { it.id }) {
        val rememberedValue = rememberSaveable {
            Random.nextInt()
        }
    }
}
LazyListSnippets.kt

Artikelanimationen

Wenn Sie das RecyclerView-Widget verwendet haben, wissen Sie, dass damit Elementänderungen automatisch animiert werden. Lazy-Layouts bieten dieselben Funktionen für die Artikelneuanordnung. Die API ist einfach: Du musst nur den Modifikator animateItem für den Artikelinhalt festlegen:

LazyColumn {
    // It is important to provide a key to each item to ensure animateItem() works as expected.
    items(books, key = { it.id }) {
        Row(Modifier.animateItem()) {
            // ...
        }
    }
}
LazyListSnippets.kt

Sie können auch eine benutzerdefinierte Animationsspezifikation angeben, wenn Sie Folgendes tun möchten:

LazyColumn {
    items(books, key = { it.id }) {
        Row(
            Modifier.animateItem(
                fadeInSpec = tween(durationMillis = 250),
                fadeOutSpec = tween(durationMillis = 100),
                placementSpec = spring(stiffness = Spring.StiffnessLow, dampingRatio = Spring.DampingRatioMediumBouncy)
            )
        ) {
            // ...
        }
    }
}
LazyListSnippets.kt

Geben Sie Schlüssel für Ihre Elemente an, damit die neue Position des verschobenen Elements gefunden werden kann.

Beispiel: Elemente in Lazy-Listen animieren

Mit Compose können Sie Änderungen an Elementen in Lazy-Listen animieren. Wenn Sie die folgenden Snippets zusammen verwenden, werden beim Hinzufügen, Entfernen und Neuanordnen von Elementen in der Lazy-Liste Animationen implementiert.

In diesem Snippet wird eine Liste von Strings mit animierten Übergängen angezeigt, wenn Elemente hinzugefügt, entfernt oder neu angeordnet werden:

@Composable
fun ListAnimatedItems(
    items: List<String>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier) {
        // Use a unique key per item, so that animations work as expected.
        items(items, key = { it }) {
            ListItem(
                headlineContent = { Text(it) },
                modifier = Modifier
                    .animateItem(
                        // Optionally add custom animation specs
                    )
                    .fillParentMaxWidth()
                    .padding(horizontal = 8.dp, vertical = 0.dp),
            )
        }
    }
}
AnimatedOrderedList.kt

Wichtige Punkte zum Code

  • ListAnimatedItems zeigt eine Liste von Strings in einer LazyColumn mit animierten Übergängen an, wenn Elemente geändert werden.
  • Mit der items-Funktion wird jedem Element in der Liste ein eindeutiger Schlüssel zugewiesen. Compose verwendet die Tasten, um die Elemente zu verfolgen und Änderungen an ihren Positionen zu erkennen.
  • ListItem definiert das Layout der einzelnen Listenelemente. Er nimmt einen headlineContent-Parameter an, der den Hauptinhalt des Artikels definiert.
  • Mit dem Modifikator animateItem werden Standardanimationen auf das Hinzufügen, Entfernen und Verschieben von Elementen angewendet.

Das folgende Snippet zeigt einen Bildschirm mit Steuerelementen zum Hinzufügen und Entfernen von Elementen sowie zum Sortieren einer vordefinierten Liste:

@Composable
private fun ListAnimatedItemsExample(
    data: List<String>,
    modifier: Modifier = Modifier,
    onAddItem: () -> Unit = {},
    onRemoveItem: () -> Unit = {},
    resetOrder: () -> Unit = {},
    onSortAlphabetically: () -> Unit = {},
    onSortByLength: () -> Unit = {},
) {
    val canAddItem = data.size < 10
    val canRemoveItem = data.isNotEmpty()

    Scaffold(modifier) { paddingValues ->
        Column(
            modifier = Modifier
                .padding(paddingValues)
                .fillMaxSize()
        ) {
            // Buttons that change the value of displayedItems.
            AddRemoveButtons(canAddItem, canRemoveItem, onAddItem, onRemoveItem)
            OrderButtons(resetOrder, onSortAlphabetically, onSortByLength)

            // List that displays the values of displayedItems.
            ListAnimatedItems(data)
        }
    }
}
AnimatedOrderedList.kt

Wichtige Punkte zum Code

  • ListAnimatedItemsExample zeigt einen Bildschirm mit Steuerelementen zum Hinzufügen, Entfernen und Sortieren von Elementen.
    • onAddItem und onRemoveItem sind Lambdaausdrücke, die an AddRemoveButtons übergeben werden, um Elemente zur Liste hinzuzufügen oder daraus zu entfernen.
    • resetOrder, onSortAlphabetically und onSortByLength sind Lambdaausdrücke, die an OrderButtons übergeben werden, um die Reihenfolge der Elemente in der Liste zu ändern.
  • Unter AddRemoveButtons werden die Schaltflächen „Hinzufügen“ und „Entfernen“ angezeigt. Es aktiviert/deaktiviert die Schaltflächen und verarbeitet Schaltflächenklicks.
  • Unter OrderButtons werden die Schaltflächen zum Neuanordnen der Liste angezeigt. Es empfängt die Lambda-Funktionen zum Zurücksetzen der Reihenfolge und zum Sortieren der Liste nach Länge oder alphabetisch.
  • ListAnimatedItems ruft die zusammensetzbare Funktion ListAnimatedItems auf und übergibt die Liste data, um die animierte Liste von Strings anzuzeigen. data ist an anderer Stelle definiert.

Mit diesem Snippet wird eine Benutzeroberfläche mit den Schaltflächen Element hinzufügen und Element löschen erstellt:

@Composable
private fun AddRemoveButtons(
    canAddItem: Boolean,
    canRemoveItem: Boolean,
    onAddItem: () -> Unit,
    onRemoveItem: () -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        Button(enabled = canAddItem, onClick = onAddItem) {
            Text("Add Item")
        }
        Spacer(modifier = Modifier.padding(25.dp))
        Button(enabled = canRemoveItem, onClick = onRemoveItem) {
            Text("Delete Item")
        }
    }
}
AnimatedOrderedList.kt

Wichtige Punkte zum Code

  • AddRemoveButtons zeigt eine Reihe von Schaltflächen zum Hinzufügen und Entfernen von Elementen in der Liste an.
  • Mit den Parametern canAddItem und canRemoveItem wird der Aktivierungsstatus der Schaltflächen gesteuert. Wenn canAddItem oder canRemoveItem den Wert „false“ haben, ist die entsprechende Schaltfläche deaktiviert.
  • Die Parameter onAddItem und onRemoveItem sind Lambdas, die ausgeführt werden, wenn der Nutzer auf die entsprechende Schaltfläche klickt.

Schließlich werden in diesem Snippet drei Schaltflächen zum Sortieren der Liste angezeigt: Zurücksetzen, Alphabetisch und Länge:

@Composable
private fun OrderButtons(
    resetOrder: () -> Unit,
    orderAlphabetically: () -> Unit,
    orderByLength: () -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        var selectedIndex by remember { mutableIntStateOf(0) }
        val options = listOf("Reset", "Alphabetical", "Length")

        SingleChoiceSegmentedButtonRow {
            options.forEachIndexed { index, label ->
                SegmentedButton(
                    shape = SegmentedButtonDefaults.itemShape(
                        index = index,
                        count = options.size
                    ),
                    onClick = {
                        Log.d("AnimatedOrderedList", "selectedIndex: $selectedIndex")
                        selectedIndex = index
                        when (options[selectedIndex]) {
                            "Reset" -> resetOrder()
                            "Alphabetical" -> orderAlphabetically()
                            "Length" -> orderByLength()
                        }
                    },
                    selected = index == selectedIndex
                ) {
                    Text(label)
                }
            }
        }
    }
}
AnimatedOrderedList.kt

Wichtige Punkte zum Code

  • Bei OrderButtons wird ein SingleChoiceSegmentedButtonRow angezeigt, mit dem Nutzer eine Sortiermethode in der Liste auswählen oder die Listenreihenfolge zurücksetzen können. Mit einer SegmentedButton-Komponente können Sie eine einzelne Option aus einer Liste von Optionen auswählen.
  • resetOrder, orderAlphabetically und orderByLength sind Lambda-Funktionen, die ausgeführt werden, wenn die entsprechende Schaltfläche ausgewählt wird.
  • Die Statusvariable selectedIndex überwacht die ausgewählte Option.

Ergebnis

In diesem Video wird das Ergebnis der vorherigen Snippets gezeigt, wenn Elemente neu angeordnet werden:

Abbildung 1. Eine Liste, in der Elementübergänge animiert werden, wenn Elemente hinzugefügt, entfernt oder sortiert werden.

Fixierte Überschriften (experimentell)

Das Muster „Fixierte Überschrift“ ist hilfreich, wenn Listen mit gruppierten Daten angezeigt werden. Unten sehen Sie ein Beispiel für eine Kontaktliste, die nach dem Anfangsbuchstaben der einzelnen Kontakte gruppiert ist:

Video eines Smartphones, auf dem eine Kontaktliste nach oben und unten gescrollt wird

Wenn Sie mit LazyColumn eine fixierte Überschrift erstellen möchten, können Sie die experimentelle Funktion stickyHeader() verwenden und den Inhalt der Überschrift angeben:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ListWithHeader(items: List<Item>) {
    LazyColumn {
        stickyHeader {
            Header()
        }

        items(items) { item ->
            ItemRow(item)
        }
    }
}
LazyListSnippets.kt

So erstellen Sie eine Liste mit mehreren Überschriften, wie im Beispiel „Kontaktliste“ oben:

// This ideally would be done in the ViewModel
val grouped = contacts.groupBy { it.firstName[0] }

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ContactsList(grouped: Map<Char, List<Contact>>) {
    LazyColumn {
        grouped.forEach { (initial, contactsForInitial) ->
            stickyHeader {
                CharacterHeader(initial)
            }

            items(contactsForInitial) { contact ->
                ContactListItem(contact)
            }
        }
    }
}
LazyListSnippets.kt

Auf die Scrollposition reagieren

Viele Apps müssen auf Änderungen der Scrollposition und des Artikellayouts reagieren und diese im Blick behalten. Die Lazy-Komponenten unterstützen diesen Anwendungsfall, indem sie die LazyListState hochskalieren:

@Composable
fun MessageList(messages: List<Message>) {
    // Remember our own LazyListState
    val listState = rememberLazyListState()

    // Provide it to LazyColumn
    LazyColumn(state = listState) {
        // ...
    }
}
LazyListSnippets.kt

Bei einfachen Anwendungsfällen benötigen Apps in der Regel nur Informationen zum ersten sichtbaren Element. Dazu bietet LazyListState die Properties firstVisibleItemIndex und firstVisibleItemScrollOffset.

Angenommen, Sie möchten eine Schaltfläche je nachdem anzeigen oder ausblenden, ob der Nutzer den ersten Artikel übersprungen hat:

@Composable
fun MessageList(messages: List<Message>) {
    Box {
        val listState = rememberLazyListState()

        LazyColumn(state = listState) {
            // ...
        }

        // Show the button if the first visible item is past
        // the first item. We use a remembered derived state to
        // minimize unnecessary compositions
        val showButton by remember {
            derivedStateOf {
                listState.firstVisibleItemIndex > 0
            }
        }

        AnimatedVisibility(visible = showButton) {
            ScrollToTopButton()
        }
    }
}
LazyListSnippets.kt

Das Lesen des Status direkt in der Komposition ist nützlich, wenn Sie andere UI-Kompositionen aktualisieren müssen. Es gibt aber auch Szenarien, in denen das Ereignis nicht in derselben Komposition verarbeitet werden muss. Ein gängiges Beispiel hierfür ist das Senden eines Analytics-Ereignisses, wenn der Nutzer einen bestimmten Punkt im Scrollen erreicht hat. Um dies effizient zu handhaben, können wir einen snapshotFlow() verwenden:

val listState = rememberLazyListState()

LazyColumn(state = listState) {
    // ...
}

LaunchedEffect(listState) {
    snapshotFlow { listState.firstVisibleItemIndex }
        .map { index -> index > 0 }
        .distinctUntilChanged()
        .filter { it }
        .collect {
            MyAnalyticsService.sendScrolledPastFirstItemEvent()
        }
}
LazyListSnippets.kt

LazyListState bietet über das Attribut layoutInfo auch Informationen zu allen derzeit angezeigten Elementen und ihren Begrenzungen auf dem Bildschirm. Weitere Informationen finden Sie im Artikel zur Klasse LazyListLayoutInfo.

Scrollposition steuern

Neben der Reaktion auf die Scrollposition ist es auch nützlich, wenn Apps die Scrollposition steuern können. LazyListState unterstützt dies über die Funktion scrollToItem(), mit der die Scrollposition „sofort“ fixiert wird, und animateScrollToItem(), mit der per Animation (auch als „weiches Scrollen“ bezeichnet) gescrollt wird:

@Composable
fun MessageList(messages: List<Message>) {
    val listState = rememberLazyListState()
    // Remember a CoroutineScope to be able to launch
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState) {
        // ...
    }

    ScrollToTopButton(
        onClick = {
            coroutineScope.launch {
                // Animate scroll to the first item
                listState.animateScrollToItem(index = 0)
            }
        }
    )
}
LazyListSnippets.kt

Große Datenmengen (Auslagerung)

Mit der Paginierungsbibliothek können Apps große Listen von Elementen unterstützen und bei Bedarf kleine Teile der Liste laden und anzeigen. Paging 3.0 und höher bietet Compose-Unterstützung über die androidx.paging:paging-compose-Bibliothek.

Um eine Liste mit paginierten Inhalten anzuzeigen, können wir die Erweiterungsfunktion collectAsLazyPagingItems() verwenden und dann die zurückgegebene LazyPagingItems an items() in unserer LazyColumn übergeben. Ähnlich wie bei der Unterstützung der Paginierung in Ansichten können Sie Platzhalter anzeigen, während Daten geladen werden. Prüfen Sie dazu, ob item null ist:

@Composable
fun MessageList(pager: Pager<Int, Message>) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
}
LazyListSnippets.kt

Tipps zur Verwendung von Lazy-Layouts

Es gibt einige Tipps, mit denen Sie dafür sorgen können, dass Ihre Lazy-Layouts wie vorgesehen funktionieren.

Verwenden Sie keine Elemente mit einer Größe von 0 Pixeln.

Das kann in Szenarien passieren, in denen Sie beispielsweise asynchron einige Daten wie Bilder abrufen möchten, um die Elemente Ihrer Liste später zu füllen. Dadurch würden alle Elemente des Lazy-Layouts bei der ersten Messung zusammengesetzt, da ihre Höhe 0 Pixel beträgt und sie alle in den Darstellungsbereich passen würden. Sobald die Elemente geladen und ihre Höhe maximiert wurde, werden bei Lazy-Layouts alle anderen Elemente verworfen, die beim ersten Laden unnötig zusammengesetzt wurden, da sie nicht in den Darstellungsbereich passen. Um dies zu vermeiden, sollten Sie für Ihre Elemente eine Standardgröße festlegen, damit das Lazy-Layout korrekt berechnen kann, wie viele Elemente tatsächlich in den Darstellungsbereich passen:

@Composable
fun Item(imageUrl: String) {
    AsyncImage(
        model = rememberAsyncImagePainter(model = imageUrl),
        modifier = Modifier.size(30.dp),
        contentDescription = null
        // ...
    )
}
LazyListSnippets.kt

Wenn Sie die ungefähre Größe Ihrer Elemente kennen, nachdem die Daten asynchron geladen wurden, sollten Sie darauf achten, dass die Größe der Elemente vor und nach dem Laden gleich bleibt. Sie können dazu beispielsweise Platzhalter hinzufügen. So bleibt die richtige Scrollposition erhalten.

Vermeiden Sie das Verschachteln von Komponenten, die in dieselbe Richtung scrollbar sind.

Dies gilt nur für Fälle, in denen scrollbare untergeordnete Elemente ohne vordefinierte Größe in einem anderen scrollbaren übergeordneten Element in derselben Richtung verschachtelt werden. Beispiel: Sie versuchen, ein untergeordnetes LazyColumn ohne feste Höhe in einem vertikal scrollbaren übergeordneten Column einzubetten:

// throws IllegalStateException
Column(
    modifier = Modifier.verticalScroll(state)
) {
    LazyColumn {
        // ...
    }
}
LazyListSnippets.kt

Stattdessen können Sie dasselbe Ergebnis erzielen, indem Sie alle Ihre Composeables in einem übergeordneten LazyColumn-Element einschließen und über die DSL unterschiedliche Inhaltstypen übergeben. So können einzelne Artikel sowie mehrere Listenelemente an einem Ort gesendet werden:

LazyColumn {
    item {
        Header()
    }
    items(data) { item ->
        PhotoItem(item)
    }
    item {
        Footer()
    }
}
LazyListSnippets.kt

Beachten Sie, dass das Verschachteln von Layouts mit unterschiedlicher Ausrichtung zulässig ist, z. B. ein scrollbares übergeordnetes Element Row und ein untergeordnetes Element LazyColumn:

Row(
    modifier = Modifier.horizontalScroll(scrollState)
) {
    LazyColumn {
        // ...
    }
}
LazyListSnippets.kt

Das gilt auch für Fälle, in denen Sie weiterhin dieselben Layouts für die Ausrichtung verwenden, den verschachtelten untergeordneten Elementen aber auch eine feste Größe zuweisen:

Column(
    modifier = Modifier.verticalScroll(scrollState)
) {
    LazyColumn(
        modifier = Modifier.height(200.dp)
    ) {
        // ...
    }
}
LazyListSnippets.kt

Mehrere Elemente in einem Element

In diesem Beispiel gibt das zweite Element-Lambda zwei Elemente in einem Block aus:

LazyVerticalGrid(
    columns = GridCells.Adaptive(100.dp)
) {
    item { Item(0) }
    item {
        Item(1)
        Item(2)
    }
    item { Item(3) }
    // ...
}
LazyListSnippets.kt

Bei Lazy-Layouts wird das wie erwartet verarbeitet: Die Elemente werden nacheinander angeordnet, als wären es verschiedene Elemente. Es gibt jedoch einige Probleme dabei.

Wenn mehrere Elemente als Teil eines Elements gesendet werden, werden sie als eine Entität behandelt. Das bedeutet, dass sie nicht mehr einzeln zusammengesetzt werden können. Wenn ein Element auf dem Bildschirm sichtbar wird, müssen alle Elemente, die dem Element entsprechen, zusammengesetzt und gemessen werden. Bei übermäßiger Verwendung kann dies die Leistung beeinträchtigen. Wenn Sie im Extremfall alle Elemente in einem Element platzieren, wird der Zweck von Lazy-Layouts völlig verfehlt. Neben potenziellen Leistungsproblemen kann das Einfügen mehrerer Elemente in einen Artikel auch zu Problemen mit scrollToItem() und animateScrollToItem() führen.

Es gibt jedoch durchaus Anwendungsfälle, in denen mehrere Elemente in einem Element sinnvoll sind, z. B. Trennlinien in einer Liste. Trennlinien sollten die Scrollindexe nicht ändern, da sie nicht als eigenständige Elemente betrachtet werden sollten. Außerdem wirkt sich die Leistung nicht aus, da Trennlinien klein sind. Ein Trennstrich muss wahrscheinlich sichtbar sein, wenn das davor liegende Element sichtbar ist, damit er Teil des vorherigen Elements sein kann:

LazyVerticalGrid(
    columns = GridCells.Adaptive(100.dp)
) {
    item { Item(0) }
    item {
        Item(1)
        Divider()
    }
    item { Item(2) }
    // ...
}
LazyListSnippets.kt

Benutzerdefinierte Anordnungen verwenden

In der Regel enthalten Lazy-Listen viele Elemente und nehmen mehr Platz ein als der scrollbare Container. Wenn Ihre Liste jedoch nur wenige Elemente enthält, kann Ihr Design spezifischere Anforderungen an die Positionierung dieser Elemente im Darstellungsbereich haben.

Dazu können Sie eine benutzerdefinierte Branche Arrangement verwenden und an die LazyColumn übergeben. Im folgenden Beispiel muss das TopWithFooter-Objekt nur die Methode arrange implementieren. Zuerst werden die Elemente nacheinander angeordnet. Zweitens: Wenn die insgesamt verwendete Höhe niedriger als die Höhe des Darstellungsbereichs ist, wird die Fußzeile unten platziert:

object TopWithFooter : Arrangement.Vertical {
    override fun Density.arrange(
        totalSize: Int,
        sizes: IntArray,
        outPositions: IntArray
    ) {
        var y = 0
        sizes.forEachIndexed { index, size ->
            outPositions[index] = y
            y += size
        }
        if (y < totalSize) {
            val lastIndex = outPositions.lastIndex
            outPositions[lastIndex] = totalSize - sizes.last()
        }
    }
}
LazyListSnippets.kt

Fügen Sie contentType hinzu

Ab Compose 1.2 können Sie die Leistung Ihres Lazy-Layouts maximieren, indem Sie Ihren Listen oder Rastern contentType hinzufügen. So können Sie den Inhaltstyp für jedes Element des Layouts angeben, wenn Sie eine Liste oder ein Raster mit mehreren verschiedenen Elementtypen erstellen:

LazyColumn {
    items(elements, contentType = { it.type }) {
        // ...
    }
}
LazyListSnippets.kt

Wenn Sie contentType angeben, kann Compose Kompositionen nur zwischen Elementen desselben Typs wiederverwenden. Da die Wiederverwendung effizienter ist, wenn Sie Elemente mit ähnlicher Struktur erstellen, wird durch die Angabe der Inhaltstypen verhindert, dass „Compose“ versucht, ein Element vom Typ A über einem völlig anderen Element vom Typ B zu erstellen. So lassen sich die Vorteile der Wiederverwendung von Kompositionen und die Leistung des Lazy-Layouts maximieren.

Leistung messen

Die Leistung eines Lazy-Layouts lässt sich nur zuverlässig messen, wenn es im Release-Modus ausgeführt wird und die R8-Optimierung aktiviert ist. Bei Debug-Builds kann das Scrollen mit dem Lazy Layout langsamer erscheinen. Weitere Informationen finden Sie unter Leistung von Kompositionen.

Zusätzliche Ressourcen