Kartu

Composable Card bertindak sebagai penampung Desain Material untuk UI Anda. Kartu biasanya menyajikan satu konten yang koheren. Berikut adalah beberapa contoh tempat Anda dapat menggunakan kartu:

  • Produk di aplikasi belanja.
  • Artikel berita di aplikasi berita.
  • Pesan di aplikasi komunikasi.

Fokusnya adalah menggambarkan satu bagian konten yang membedakan Card dari penampung lainnya. Misalnya, Scaffold memberikan struktur umum untuk seluruh layar. Kartu umumnya merupakan elemen UI yang lebih kecil di dalam tata letak yang lebih besar, sedangkan komponen tata letak seperti Column atau Row menyediakan API yang lebih sederhana dan lebih umum.

Kartu yang ditinggikan dengan teks dan ikon.
Gambar 1. Contoh kartu yang diisi dengan teks dan ikon.

Implementasi dasar

Card berperilaku seperti penampung lain di Compose. Anda mendeklarasikan kontennya dengan memanggil composable lain di dalamnya. Misalnya, perhatikan cara Card berisi panggilan ke Text dalam contoh minimal berikut:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Implementasi lanjutan

Lihat referensi untuk definisi API Card. Class ini menentukan beberapa parameter yang memungkinkan Anda menyesuaikan tampilan dan perilaku komponen.

Beberapa parameter utama yang perlu diperhatikan adalah sebagai berikut:

  • elevation: Menambahkan bayangan ke komponen yang membuatnya tampak tertinggi di atas latar belakang.
  • colors: Menggunakan jenis CardColors untuk menetapkan warna default penampung dan turunan apa pun.
  • enabled: Jika Anda meneruskan false untuk parameter ini, kartu akan tampak dinonaktifkan dan tidak merespons input pengguna.
  • onClick: Biasanya, Card tidak menerima peristiwa klik. Dengan demikian, overload utama yang perlu Anda perhatikan adalah overload yang menentukan parameter onClick. Anda harus menggunakan overload ini jika ingin implementasi Card merespons penekanan dari pengguna.

Contoh berikut menunjukkan cara menggunakan parameter ini, serta parameter umum lainnya seperti shape dan modifier.

Kartu yang terisi

Berikut adalah contoh cara menerapkan kartu yang terisi.

Kuncinya di sini adalah penggunaan properti colors untuk mengubah warna yang terisi.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Implementasi ini akan muncul sebagai berikut:

Kartu diisi dengan warna varian permukaan dari tema material.
Gambar 2. Contoh kartu yang terisi.

Kartu yang Ditinggikan

Cuplikan berikut menunjukkan cara menerapkan kartu yang ditinggikan. Gunakan composable ElevatedCard khusus.

Anda dapat menggunakan properti elevation untuk mengontrol tampilan elevasi dan bayangan yang dihasilkan.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Implementasi ini akan muncul sebagai berikut:

Kartu ditinggikan di atas latar belakang aplikasi, dengan bayangan.
Gambar 3. Contoh kartu yang dinaikkan.

Kartu dengan Garis Batas

Berikut adalah contoh kartu yang digarisbatasi. Gunakan composable OutlinedCard khusus.

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Implementasi ini akan muncul sebagai berikut:

Kartu digarisbatasi dengan batas hitam tipis.
Gambar 4. Contoh kartu dengan garis batas.

Batasan

Kartu tidak dilengkapi dengan tindakan scroll atau tutup yang melekat, tetapi dapat diintegrasikan ke dalam composable yang menawarkan fitur ini. Misalnya, untuk menerapkan geser guna menutup kartu, integrasikan dengan composable SwipeToDismiss. Untuk berintegrasi dengan scroll, gunakan pengubah scroll seperti verticalScroll. Lihat Dokumentasi Scroll untuk informasi selengkapnya.

Referensi tambahan