Kartu 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, komponen Card dirancang untuk mengelompokkan dan menampilkan informasi terkait dalam satu unit. Kartu sangat mudah disesuaikan, mendukung kombinasi konten utama, judul dan subtitel opsional, serta ikon di awal atau akhir. Kartu mengisi lebar penuh maksimum layar kacamata AI secara default, dapat difokuskan, dan juga dapat dibuat agar dapat diklik.

Anatomi dan Slot Kartu

Kartu Glimmer Jetpack Compose dibuat dari beberapa elemen khusus, sehingga Anda dapat menyesuaikan konten dan tata letaknya.

• Header: Bagian atas kartu, yang didesain untuk menampung gambar.

• Judul dan Subjudul: Kolom teks ini memberikan label utama dan sekunder untuk kartu.

• Ikon Awal: Ikon opsional yang muncul di awal area konten kartu.

• Ikon Akhir: Ikon opsional yang muncul di akhir area konten kartu.

• Tindakan: Slot untuk elemen interaktif utama, seperti Tombol. Hal ini memungkinkan pengguna melakukan tindakan langsung dari kartu. Slot tersedia di overload terpisah dari composable Kartu.

• Konten Utama: Isi inti kartu, tempat Anda menempatkan Teks atau konten utama lainnya.

Contoh dasar: Membuat kartu dasar

Anda dapat membuat kartu yang sangat sederhana dengan sedikit kode:

Card { Text("This is a card") }

Contoh mendetail: Menampilkan kartu kompleks

Kode berikut menunjukkan cara menggunakan beberapa slot bersama-sama untuk membuat kartu. Contoh ini juga menunjukkan cara menyambungkan Card dengan TitleChip.

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

Poin penting tentang kode

• Menunjukkan cara memanfaatkan berbagai elemen kartu, seperti header, title, subtitle, leadingIcon, dan action, untuk menyesuaikan konten dan struktur kartu.
• Menunjukkan contoh cara menempatkan TitleChip dan menggunakan Spacer.