Pengelolaan status daftar

Ikon rating bintang tiga

Daftar yang dapat di-scroll di Jetpack Compose, seperti LazyColumn dan LazyRow, dapat menampilkan data dalam jumlah besar secara efisien. Namun, perubahan konfigurasi, seperti rotasi perangkat atau melipat/membentangkan perangkat foldable, dapat mereset status daftar, yang memaksa pengguna kembali men-scroll ke posisi sebelumnya.

Praktik terbaik

Daftar yang dapat di-scroll harus mempertahankan statusnya—terutama, posisi scroll—dan status setiap elemen daftarnya (seperti input teks) selama semua perubahan konfigurasi untuk memberikan pengalaman pengguna yang lancar.

Bahan

  • rememberLazyListState(): Membuat dan mengingat LazyListState yang digunakan untuk mengontrol dan mengamati posisi scroll daftar. Status ini otomatis dipertahankan di seluruh perubahan konfigurasi.
  • rememberSaveable: Mengingat nilai status di seluruh perubahan konfigurasi, berguna untuk mempertahankan status elemen daftar individual (seperti input kolom teks).

Langkah

Di Jetpack Compose, mempertahankan posisi scroll daftar akan ditangani secara otomatis saat Anda menggunakan status scroll. Untuk mempertahankan status elemen daftar yang kompleks dan individual (seperti input TextField), gunakan rememberSaveable.

1. Mempertahankan status scroll daftar

Untuk menyimpan dan memulihkan posisi scroll daftar Anda di seluruh perubahan konfigurasi, buat LazyListState menggunakan rememberLazyListState() dan teruskan sebagai parameter state dari daftar yang dapat di-scroll, seperti LazyColumn.

Compose otomatis mempertahankan posisi scroll untuk Anda.

2. Mempertahankan status elemen daftar individual

Jika daftar Anda berisi elemen stateful (misalnya, item dengan kolom teks), status setiap elemen tersebut dapat hilang saat di-scroll keluar layar dan didaur ulang, atau selama perubahan konfigurasi.

Untuk mempertahankan status elemen individual, gunakan rememberSaveable di dalam cakupan item daftar. Hal ini memastikan bahwa saat item dikomposisi ulang atau di-scroll kembali ke tampilan, statusnya akan dipulihkan.

Berikut adalah implementasi lengkap yang dapat dikompilasi yang menunjukkan pemulihan status scroll dan status item:

// Scroll state is automatically saved and restored by rememberLazyListState
val listState = rememberLazyListState()

LazyColumn(state = listState) {
    items(100) { index ->
        // Use rememberSaveable to preserve individual item state (e.g., text input)
        var text by rememberSaveable { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Item $index") }
        )
    }
}

Hasil

Daftar yang dapat di-scroll kini dapat memulihkan posisi scroll dan status setiap elemen dalam daftar.

Referensi lainnya