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, GlimmerLazyColumn berfungsi mirip dengan LazyColumn Compose dengan hanya menyusun dan menata item yang terlihat untuk mempertahankan performa tinggi. Namun, kolom lambat Glimmer dibuat untuk kontrol kacamata display, tempat pengguna berinteraksi menggunakan touchpad, bukan layar sentuh. Meskipun pengguna seluler dapat mengetuk koordinat apa pun di layar kapan saja, pengguna dengan kacamata display hanya dapat berinteraksi dengan item yang memiliki fokus.

Perilaku fokus dan item turunan

Kolom lambat Glimmer otomatis menangani navigasi berbasis fokus. Tidak seperti daftar untuk perangkat seluler yang fokus dan scrollnya sering kali terpisah, kolom lambat Glimmer mengoordinasikan 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 di dalam kolom lambat Glimmer dapat difokuskan. Saat item memiliki fokus, berikan juga respons visual, seperti batas aktif atau sorotan. Meskipun pengguna masih dapat men-scroll melewati item yang tidak dapat difokuskan, mereka tidak dapat berinteraksi dengannya. Gunakan komponen bawaan seperti ListItem atau Card jika memungkinkan, karena komponen ini sudah dapat difokuskan dan memberikan masukan visual untuk status fokus.

Contoh: Kolom lambat Glimmer dengan beberapa item

Kode berikut menunjukkan cara menggunakan kolom lambat Glimmer dengan metode DSL item dan items untuk membuat daftar item:

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

Contoh: Kolom lambat Glimmer dengan slot judul

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

Kode berikut membuat kolom lambat Glimmer dengan slot judul:

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

Menggunakan status daftar lambat Glimmer untuk operasi daftar terprogram

Untuk mengontrol dan mengamati berbagai aspek status daftar, seperti posisi scroll-nya menggunakan properti firstVisibleItemIndex dan firstVisibleItemScrollOffset, gunakan GlimmerLazyListState.

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