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

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

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

Anatomi dan slot

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

Slot Deskripsi

Header

Bagian atas kartu, yang dirancang untuk menampung gambar.

Judul dan subjudul

Kolom teks ini memberikan label utama dan sekunder untuk kartu. Judul ditempatkan di atas subjudul.

Ikon utama

Ikon opsional (biasanya Icon) yang muncul di awal area konten kartu.

Ikon akhir

Ikon opsional yang muncul di akhir area konten kartu.

Konten utama

Isi inti kartu untuk Text atau konten utama.

Default kartu

Default berikut berlaku untuk kartu:

Contoh: Kartu dasar

Kode berikut menunjukkan kode minimal yang diperlukan untuk membuat kartu:

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

Contoh: Kartu dengan beberapa slot

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

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

Poin penting tentang kode

  • Menunjukkan cara menggunakan berbagai elemen kartu, seperti title, subtitle, dan leadingIcon, untuk menyesuaikan konten dan struktur kartu.
  • Menggunakan overload Card dengan onClick untuk membuat seluruh platform kartu menjadi interaktif.

Kartu tindakan

Jika ingin menyertakan tombol tindakan dengan kartu, gunakan ActionCard. Kartu tindakan memiliki elemen yang sama dengan kartu standar dan juga menyertakan parameter action tambahan yang menentukan tombol bawah.

Gambar 2. Contoh ActionCard di Jetpack Compose Glimmer.

Contoh: Kartu tindakan dasar

Kode ini menunjukkan cara membuat ActionCard:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

Contoh: Kartu tindakan dengan ikon

Kode ini menunjukkan cara membuat ActionCard yang lebih kompleks dengan ikon:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}