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 →

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.

Perilaku scrolling dan penentuan posisi

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 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:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}
StackSamples.kt

Poin penting tentang kode

• Menetapkan textMotion untuk LocalTextStyle teks ke Animated. Hal ini meningkatkan rendering teks yang lancar selama animasi tata letak atau transisi penskalaan untuk mencegah artefak snapping piksel.
• Menyediakan ukuran 364.dp tertentu untuk tinggi tumpukan vertikal. Selalu berikan tinggi tertentu, gunakan pengubah tinggi, atau terapkan pengubah fillMaxSize untuk menentukan area visual untuk transisi kartu.
• Tidak seperti komponen lain yang mengambil parameter bentuk secara langsung, VerticalStack mengelola batas visual itemnya menggunakan itemDecoration pengubah. Contoh ini meneruskan bentuk yang sama untuk itemDecoration item awal seperti semua item turunan untuk mempertahankan efek visual dan kliping yang konsisten. Contoh ini menggunakan default CardDefaults.shape.