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 men-scroll lagi ke posisi sebelumnya.

Praktik terbaik

Daftar yang dapat di-scroll harus mempertahankan statusnya—terutama, posisi scroll—dan status elemen daftar individualnya (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. Konfigurasi tersebut 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 ditangani secara otomatis saat Anda menggunakan status scroll. Untuk mempertahankan status elemen daftar kompleks 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 secara otomatis mempertahankan posisi scroll untuk Anda.

2. Mempertahankan status elemen daftar individual

Jika daftar Anda berisi elemen berstatus (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 dalam tampilan, statusnya 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