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 berfungsi sebagai penampung utama untuk konten terkait, sehingga menciptakan batas visual yang jelas untuk unit informasi yang mudah dicerna. Kartu sangat mudah disesuaikan, mendukung kombinasi konten utama, judul opsional, subtitel, dan ikon di awal atau akhir. Kartu mengisi lebar maksimum yang tersedia secara default, dapat difokuskan, dan Anda juga dapat membuatnya dapat diklik. Kartu mendukung susunan vertikal dengan gambar header di paling atas, diikuti dengan judul, subjudul, dan konten isi.

Kartu dibuat di sistem platform Jetpack Compose Glimmer, sehingga kartu mewarisi properti fisik seperti efek kedalaman, kliping, dan sorotan batas yang konsisten.

Anatomi dan slot

Kartu Glimmer Jetpack Compose dibuat dari beberapa elemen khusus yang memungkinkan Anda menyesuaikan konten dan tata letaknya.

Kartu default

Default berikut berlaku untuk kartu:

• Lebar: Kartu mengisi lebar maksimum yang tersedia pada layar untuk mengoptimalkan keterbacaan pada kacamata tampilan.
• Tinggi minimum: 80.dp
• Jarak vertikal teks: 3.dp
• Bentuk header: Menggunakan RoundedCornerShape dengan 24.dp sudut
• Padding konten: Defaultnya adalah GlimmerTheme.componentSpacingValues.medium. Hal ini memengaruhi padding terluar di sekitar gambar header dan penampung konten.
• Bentuk: Defaultnya adalah GlimmerTheme.shapes.medium.

• Rendering teks: Menggunakan nilai default dari GlimmerTheme.typography untuk slot berikut:

  • Judul: bodyMedium
  • Subjudul: caption
  • Konten utama: bodySmall

Contoh: Kartu dasar

Kode berikut membuat kartu dasar:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}
CardSamples.kt

Contoh: Kartu kompleks dengan beberapa slot

Kode berikut menunjukkan cara menggunakan beberapa slot bersama-sama untuk membuat kartu.

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}
CardSamples.kt

Poin penting tentang kode

• Menunjukkan cara menggunakan berbagai elemen kartu, seperti header, title, leadingIcon, dan action, untuk menyesuaikan konten dan struktur kartu.
• Menggunakan penggantian Card standar dengan tindakan karena hanya kartu (atau tindakan internalnya) yang perlu difokuskan. Jika Anda perlu membuat seluruh permukaan kartu interaktif, gunakan penggantian Card dengan onClick.
• Kartu ini menggunakan slot tindakan, sehingga permukaan kartu tidak dapat difokuskan, dan fokus diarahkan ke tombol tindakan.