Łatwo wczytywać dane za pomocą list i przewijania

Dzięki opóźnionemu wczytywaniu i przewijaniu możesz obsługiwać w swojej aplikacji duże listy elementów, w tym nieskończone, wczytując i wyświetlając dane stopniowo. Ta technika umożliwia skrócenie początkowego czasu wczytywania i zoptymalizowanie wykorzystania pamięci, co poprawia wydajność.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Wyświetlanie treści podzielonych na strony

Dzięki bibliotece stron możesz wczytywać i wyświetlać strony danych z większego zbioru danych uzyskanego z pamięci lokalnej lub przez sieć. Aby wyświetlić pogrupowaną listę z paskiem postępu, który informuje użytkownika, że pobierane są kolejne dane, użyj tego kodu:

@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

Najważniejsze informacje o kodzie

  • LazyColumn: ta kompozycja służy do efektywnego wyświetlania dużej listy elementów (wiadomości). Renderuje tylko elementy widoczne na ekranie, co pozwala oszczędzać zasoby i pamięć.
  • Obiekt lazyPagingItems efektywnie zarządza wczytywaniem i prezentacją przepagedowanych danych w ramach LazyColumn. Przekazuje wartość LazyPagingItems do funkcji items w komponowalnym komponencie LazyColumn.
  • MessageRow(message: Text) odpowiada za renderowanie poszczególnych elementów wiadomości, prawdopodobnie wyświetlając nadawcę i tekst wiadomości na karcie.
  • MessagePlaceholder() wyświetla wizualny element zastępczy (animowaną ikonę ładowania), podczas gdy pobiera rzeczywiste dane wiadomości, co poprawia wrażenia użytkownika.

Wyniki

Na filmie poniżej widać, jak pobieranie danych z dużej listy wpływa na działanie aplikacji podczas przewijania przez użytkownika.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Listy i siatki umożliwiają wyświetlanie kolekcji w atrakcyjnej wizualnie formie, która jest łatwa w odczytaniu dla użytkowników.
Kolekcja krótkich przewodników
Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników
Ta seria filmów przedstawia różne interfejsy API usługi Compose, szybko pokazując, co jest dostępne i jak z nich korzystać.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię