Tumpukan vertikal di Jetpack Compose Glimmer

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Display Glasses
Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, VerticalStack adalah tata letak yang dapat di-scroll secara vertikal dan lambat yang mengatur item dalam urutan tiga dimensi yang tumpang tindih secara visual. Item utama ditampilkan secara mencolok di latar depan, sedangkan item berikutnya diposisikan di belakangnya.

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

Perilaku scrolling dan pemosisian

Karena tumpukan mengatur item dalam tata letak yang ringkas dan tumpang tindih, tumpukan memiliki beberapa perilaku yang berbeda dari jenis komponen berurutan lainnya, seperti daftar:

  • Saat pengguna men-scroll secara vertikal, item latar depan aktif akan bertransisi keluar dari tampilan, sehingga item yang berada tepat di bawahnya dapat bergeser ke posisi latar depan yang mencolok.
  • Item selalu dianimasikan dengan cepat menggunakan animasi pegas khusus ke posisi latar depan setelah gestur pengguna berakhir.
  • Item diposisikan di sepanjang sumbu z, dengan item yang lebih jauh dalam daftar ditempatkan di belakang item utama.

Pengelolaan fokus

VerticalStack menggunakan sistem fokus khusus untuk memastikan bahwa item latar depan saat ini selalu menjadi target utama untuk interaksi pengguna:

  • Fokus awal dan entri ulang: Fokus awal dan entri ulang fokus akan masuk ke item teratas tumpukan saat ini.
  • Notifikasi fokus otomatis: Saat item bertransisi, tumpukan akan meminta fokus untuk item teratas.
  • Pelacakan fokus: Setiap item menggunakan onFocusChanged untuk memberi tahu StackState tentang status fokusnya masing-masing.

Contoh: Membuat tumpukan vertikal

Kode berikut membuat tumpukan vertikal dengan beberapa item kartu:

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}