Memuat data secara lambat dengan daftar dan Paging

Dengan pemuatan lambat dan Paging, Anda dapat mendukung daftar item yang besar—termasuk daftar yang tidak terbatas—di aplikasi dengan memuat dan menampilkan data secara bertahap. Teknik ini memungkinkan Anda mengurangi waktu pemuatan awal dan mengoptimalkan penggunaan memori, sehingga meningkatkan performa.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Menampilkan konten yang dibagi-bagi

Dengan library Paging, Anda dapat memuat dan menampilkan halaman data dari set data yang lebih besar yang diperoleh dari penyimpanan lokal atau melalui jaringan. Gunakan kode berikut untuk menampilkan daftar yang di-pagination yang menampilkan status progres untuk menunjukkan kepada pengguna bahwa lebih banyak data sedang diambil:

@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

Poin-poin penting tentang kode

  • LazyColumn: Composable ini digunakan untuk menampilkan daftar item (pesan) yang besar secara efisien. Fungsi ini hanya merender item yang terlihat di layar, sehingga menghemat resource dan memori.
  • Objek lazyPagingItems mengelola pemuatan dan presentasi data yang di-page dalam LazyColumn secara efisien. Fungsi ini meneruskan LazyPagingItems ke items di composable LazyColumn.
  • MessageRow(message: Text) bertanggung jawab untuk merender setiap item pesan, yang kemungkinan menampilkan pengirim dan teks pesan dalam Kartu.
  • MessagePlaceholder() menyediakan placeholder visual (indikator lingkaran berputar pemuatan) saat data pesan yang sebenarnya diambil, sehingga meningkatkan pengalaman pengguna.

Hasil

Video berikut menunjukkan perilaku yang dihasilkan dari daftar besar yang mengambil data saat pengguna men-scroll.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Daftar dan petak memungkinkan aplikasi Anda menampilkan koleksi dalam bentuk yang menarik secara visual dan mudah digunakan oleh pengguna.
Koleksi panduan cepat
Pelajari cara fungsi composable dapat memudahkan Anda membuat komponen UI yang menarik berdasarkan sistem desain Desain Material.
Koleksi panduan cepat
Rangkaian video ini memperkenalkan berbagai Compose API, yang dengan cepat menunjukkan kepada Anda apa yang tersedia dan cara menggunakannya.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan