Daten mit Listen und Seitenlademechanismus verzögert laden
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Mit Lazy Loading und Paging können Sie große Listen mit Elementen – einschließlich einer unendlichen Liste – in Ihrer App unterstützen, indem Sie Daten schrittweise laden und anzeigen. So lassen sich die anfänglichen Ladezeiten verkürzen und die Arbeitsspeichernutzung optimieren, was die Leistung verbessert.
Versionskompatibilität
Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Seitenbasierte Inhalte anzeigen
Mit der Paging-Bibliothek können Sie Seiten mit Daten aus einem größeren Datensatz laden und anzeigen, der aus dem lokalen Speicher oder über ein Netzwerk abgerufen wurde. Mit dem folgenden Code können Sie eine paginated_list mit einer Fortschrittsanzeige anzeigen, die dem Nutzer signalisiert, dass weitere Daten abgerufen werden:
LazyColumn: Mit diesem Composeable können Sie eine große Liste von Elementen (Nachrichten) effizient anzeigen. Es werden nur die Elemente gerendert, die auf dem Bildschirm sichtbar sind, wodurch Ressourcen und Arbeitsspeicher gespart werden.
Das lazyPagingItems-Objekt verwaltet das Laden und Darstellen von paginaten Daten innerhalb des LazyColumn effizient. Es gibt LazyPagingItems an items im LazyColumn-Kompositelement weiter.
MessageRow(message: Text) ist für das Rendern einzelner Nachrichtenelemente verantwortlich. Wahrscheinlich werden der Absender und der Text der Nachricht auf einer Karte angezeigt.
MessagePlaceholder() zeigt einen visuellen Platzhalter (eine Ladeanimation) an, während die tatsächlichen Nachrichtendaten abgerufen werden, was die Nutzerfreundlichkeit erhöht.
Ergebnisse
Im folgenden Video wird das resultierende Verhalten einer großen Liste gezeigt, bei der Daten beim Scrollen des Nutzers abgerufen werden.
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Liste oder Raster anzeigen
Mit Listen und Rastern können Sie Sammlungen in Ihrer App in einer visuell ansprechenden und für Nutzer leicht verständlichen Form präsentieren.
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
In dieser Videoreihe werden verschiedene Compose APIs vorgestellt. Sie erhalten einen schnellen Überblick über die verfügbaren APIs und ihre Verwendung.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-02-06 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-02-06 (UTC)."],[],[],null,["# Lazily load data with lists and Paging\n\n\u003cbr /\u003e\n\nWith lazy loading and Paging, you can support large lists of items---including an\ninfinite list---in your app by loading and displaying data incrementally. This\ntechnique enables you to reduce initial load times and optimize memory usage,\nenhancing performance.\n| **Note:** For optimized performance, use the Paging Library with a lazy list for an infinite list of data.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"androidx.paging:paging-compose:3.3.0-alpha05\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation \"androidx.paging:paging-compose:3.3.0-alpha05\"\n \n```\n\n\u003cbr /\u003e\n\nDisplay paged content\n---------------------\n\nWith the Paging library, you can load and display pages of data from a larger\ndataset acquired from local storage or over a network. Use the following code to\ndisplay a paginated list that shows a progress bar to indicate to the user that\nmore data is being fetched:\n\n\n```kotlin\n@Composable\nfun MessageList(\n modifier: Modifier,\n pager: Pager\u003cInt, Message\u003e\n) {\n val lazyPagingItems = pager.flow.collectAsLazyPagingItems()\n\n LazyColumn {\n items(\n lazyPagingItems.itemCount,\n key = lazyPagingItems.itemKey { it.id }\n ) { index -\u003e\n val message = lazyPagingItems[index]\n if (message != null) {\n MessageRow(message)\n } else {\n MessagePlaceholder()\n }\n }\n }\n @Composable\n fun MessagePlaceholder(modifier: Modifier) {\n Box(\n Modifier\n .fillMaxWidth()\n .height(48.dp)\n ) {\n CircularProgressIndicator()\n }\n }\n\n @Composable\n fun MessageRow(\n modifier: Modifier,\n message: Message\n ) {\n Card(modifier = Modifier.padding(8.dp)) {\n Column(\n modifier = Modifier.padding(8.dp),\n verticalArrangement = Arrangement.Center\n ) {\n Text(message.sender)\n Text(message.text)\n }\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/lists/LazyListSnippets.kt#L760-L806\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- [`LazyColumn`](/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)): This composable is used to display a large list of items (messages) efficiently. It only renders the items that are visible on the screen, thus saving resources and memory.\n- The [`lazyPagingItems`](/reference/kotlin/androidx/paging/compose/LazyPagingItems) object efficiently manages the loading and presentation of paged data within the `LazyColumn`. It passes `LazyPagingItems` to [`items`](/reference/kotlin/androidx/compose/foundation/lazy/LazyListScope#items(kotlin.Int,kotlin.Function1,kotlin.Function1,kotlin.Function2)) in the `LazyColumn` composable.\n- `MessageRow(message: Text)` is responsible for rendering individual message items, likely displaying the sender and text of the message within a Card.\n- `MessagePlaceholder()` provides a visual placeholder (a loading spinner) while the actual message data is being fetched, enhancing the user experience.\n\nResults\n-------\n\nThe following video shows the resulting behavior of a large list fetching data\nas the user scrolls.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display a list or grid\n\nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\n### Compose basics (video collection)\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]