Łatwo wczytywać dane za pomocą list i przewijania

Dzięki leniwemu ładowaniu i stronicowaniu możesz obsługiwać w aplikacji duże listy elementów, w tym listy nieskończone, przez stopniowe wczytywanie i wyświetlanie danych. Ta technika pozwala skrócić początkowy czas wczytywania i zoptymalizować wykorzystanie pamięci, co zwiększa wydajność.

Wyniki

Poniższy film pokazuje, jak zachowuje się duża lista, która pobiera dane, gdy użytkownik przewija ekran.

Zgodność wersji

Ta implementacja wymaga, aby w projekcie ustawić minSDK na poziom interfejsu API 21 lub wyższy.

Zależności

Wyświetlanie treści podzielonych na strony

Dzięki bibliotece Paging możesz wczytywać i wyświetlać strony danych z większego zbioru danych pozyskanego z pamięci lokalnej lub przez sieć. Użyj poniższego kodu, aby wyświetlić listę podzieloną na strony z paskiem postępu, który informuje użytkownika, że pobierane są kolejne dane:

@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)
            }
        }
    }
}

Najważniejsze informacje o kodzie

  • LazyColumn: ten element kompozycyjny służy do wydajnego 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ą danych podzielonych na strony w ramach LazyColumn. Przekazuje on LazyPagingItems do items w funkcji kompozycyjnej 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() zapewnia wizualny obiekt zastępczy (wskaźnik wczytywania) podczas pobierania rzeczywistych danych wiadomości, co poprawia wrażenia użytkownika.

Kolekcje zawierające ten przewodnik

Ten przewodnik jest częścią tych kolekcji krótkich przewodników, które obejmują szersze cele związane z programowaniem na Androida:

Listy i siatki umożliwiają aplikacji wyświetlanie kolekcji w atrakcyjnej wizualnie formie, która jest łatwa do przyswojenia przez użytkowników.
Kolekcja krótkich przewodników
Dowiedz się, jak funkcje typu „composable” mogą ułatwić tworzenie pięknych komponentów interfejsu na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników
Ta seria filmów przedstawia różne interfejsy API Compose, szybko pokazując, co jest dostępne i jak z nich korzystać.
Kolekcja krótkich przewodników

Masz pytania lub chcesz podzielić się opinią?

Odwiedź stronę z najczęstszymi pytaniami i zapoznaj się z krótkimi przewodnikami lub skontaktuj się z nami i podziel się swoją opinią.
Zobacz najczęstsze pytania Prześlij opinię