Kilau Daftar di Jetpack Compose

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Kacamata AI

Di Glimmer Jetpack Compose, daftar adalah komponen UI yang dapat di-scroll secara vertikal yang secara efisien hanya merender item yang terlihat, yang didesain untuk memberikan perilaku spesifik dan kompatibilitas input untuk aplikasi kacamata AI. Glimmer Jetpack Compose melakukan hal ini menggunakan komponen VerticalList dan ListItem.

Gambar 1. Contoh beberapa gaya daftar yang berbeda di Glimmer Jetpack Compose.

VerticalList adalah komponen Glimmer Jetpack Compose untuk menampilkan konten vertikal yang dapat di-scroll. Library ini menawarkan fungsi API yang sama seperti LazyColumn, tetapi dengan perilaku yang dioptimalkan secara khusus untuk Jetpack Compose Glimmer dan kacamata AI dengan layar.

Daftar Glimmer Jetpack Compose memiliki beberapa batasan unik:

  • Daftar hanya boleh menampilkan tiga item atau kurang dalam satu tampilan.
  • Jika daftar berisi lebih banyak item daripada yang dapat dimuat dalam tampilan, scrim hitam akan digunakan di dekat batas daftar.

Contoh: Menampilkan daftar vertikal dengan tiga item

Kode berikut menunjukkan cara menggunakan komponen VerticalList dan ListItem untuk membuat daftar tiga item:

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

Poin penting tentang kode

  • Daftar ini menampilkan tiga item yang dibuat secara dinamis, dengan masing-masing berupa ListItem.
  • Setiap ListItem dapat disesuaikan, dan ikon dapat ditambahkan ke dalamnya.