Kartu

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

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

Fokus pada penggambaran satu konten yang membedakan Card dari penampung lainnya. Misalnya, Scaffold menyediakan struktur umum ke 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 generik.

Penerapan dasar

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

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

Penerapan lanjutan

Lihat referensi untuk definisi API Card. Objek 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 lebih tinggi dari latar belakang.
• colors: Menggunakan jenis CardColors untuk menyetel warna default container dan turunannya.
• enabled: Jika Anda meneruskan false untuk parameter ini, kartu akan muncul sebagai dinonaktifkan dan tidak merespons input pengguna.
• onClick: Biasanya, Card tidak menerima peristiwa klik. Oleh karena itu, overload utama yang ingin Anda catat adalah yang menentukan parameter onClick. Anda harus menggunakan kelebihan beban ini jika ingin penerapan Card Anda merespons tekanan dari pengguna.

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

Kartu terisi

Berikut adalah contoh cara menerapkan kartu yang terisi.

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

@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

Penerapan ini akan terlihat seperti berikut:

Kartu Timbul

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

Penerapan ini akan terlihat seperti berikut:

Kartu dengan Garis Batas

Berikut adalah contoh kartu yang memiliki garis batas. 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

Penerapan ini akan terlihat seperti berikut:

Batasan

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

Referensi lainnya

• Dokumen Material UI