Daten mit Listen und Seitenlademechanismus verzögert laden

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:

@Composable
fun MessageList(
    modifier: Modifier,
    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()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}
LazyListSnippets.kt

Wichtige Punkte zum Code

  • 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:

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.
Sammlung von Kurzanleitungen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Sammlung von Kurzanleitungen
In dieser Videoreihe werden verschiedene Compose APIs vorgestellt. Sie erhalten einen schnellen Überblick über die verfügbaren APIs und ihre Verwendung.
Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.
Zu den FAQs Feedback geben