Kilau Daftar di Jetpack Compose

Perangkat XR yang kompatibel

Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.

Mempelajari jenis perangkat XR →

Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, VerticalList berfungsi mirip dengan LazyColumn Compose dengan hanya menyusun dan menata letak item yang terlihat untuk mempertahankan performa tinggi. Namun, untuk Jetpack Compose Glimmer, daftar vertikal dibuat untuk kontrol kacamata tampilan, tempat pengguna berinteraksi menggunakan touchpad, bukan layar sentuh. Meskipun pengguna perangkat seluler dapat mengetuk koordinat apa pun di layar kapan saja, pengguna dengan kacamata tampilan hanya dapat berinteraksi dengan item yang memiliki fokus.

Perilaku fokus dan item turunan

Daftar vertikal dioptimalkan untuk menangani navigasi berbasis fokus secara otomatis. Tidak seperti daftar untuk perangkat seluler yang sering kali memisahkan fokus dan scroll, daftar vertikal mengatur keduanya dengan memindahkan fokus melalui item turunannya saat pengguna men-scroll dengan touchpad. Daftar itu sendiri tidak dapat difokuskan, sehingga mengelola dan meminta fokus untuk turunannya agar pengguna memiliki titik interaksi yang jelas saat men-scroll.

Karena tidak ada input sentuh langsung, buat semua item turunan yang Anda tempatkan di dalam daftar vertikal dapat difokuskan, dan berikan respons visual saat item memiliki fokus, seperti batas atau sorotan aktif. Meskipun pengguna masih dapat men-scroll melewati item yang tidak dapat difokuskan, mereka tidak dapat berinteraksi dengannya. Gunakan komponen bawaan seperti ListItem atau Card dalam daftar vertikal Anda jika memungkinkan, karena komponen ini sudah dapat difokuskan dan memberikan masukan visual untuk status fokus.

Contoh: Daftar vertikal dengan beberapa item

Kode berikut menunjukkan cara menggunakan daftar vertikal dengan metode item dan items DSL untuk membuat daftar item:

@Composable
fun VerticalListSample() {
    VerticalList {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
ListSamples.kt

Contoh: Daftar vertikal dengan slot judul

Jetpack Compose Glimmer juga menyediakan kelebihan beban daftar vertikal yang berisi slot judul. Judul yang tidak dapat difokuskan (biasanya TitleChip) tetap statis di tengah atas saat konten daftar di-scroll di bawahnya.

Kode berikut membuat daftar vertikal dengan slot judul:

@Composable
fun VerticalListWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    VerticalList(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
ListSamples.kt

Menggunakan status daftar untuk operasi daftar terprogram

Gunakan ListState untuk mengontrol dan mengamati berbagai aspek status daftar, seperti posisi scroll-nya menggunakan properti firstVisibleItemIndex dan firstVisibleItemScrollOffset.

Anda dapat mengangkat status ini menggunakan rememberListState untuk men-scroll secara terprogram menggunakan scrollToItem dan animateScrollToItem.