Kartu

Composable Card berfungsi sebagai container Desain Material untuk UI Anda. Kartu biasanya menyajikan satu konten yang koheren. Berikut ini adalah beberapa contoh penggunaan kartu:

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

Teknik ini adalah fokus pada menggambarkan satu konten yang membedakan Card dari penampung lain. Misalnya, Scaffold menyediakan struktur umum ke seluruh layar. Kartu biasanya 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.

Implementasi 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. Mendefinisikan beberapa yang memungkinkan Anda menyesuaikan tampilan dan perilaku komponen.

Beberapa parameter utama yang perlu diperhatikan adalah sebagai berikut:

• elevation: Menambahkan bayangan ke komponen yang membuatnya muncul ditinggikan di atas latar belakang.
• colors: Menggunakan jenis CardColors untuk menetapkan warna default keduanya container dan setiap turunannya.
• enabled: Jika Anda meneruskan false untuk parameter ini, kartu akan muncul sebagai dinonaktifkan dan tidak menanggapi input pengguna.
• onClick: Biasanya, Card tidak menerima peristiwa klik. Dengan demikian, kelebihan beban utama yang perlu Anda perhatikan adalah hal yang menentukan Parameter onClick. Anda harus menggunakan {i> overload<i} ini jika Anda ingin implementasi Card untuk merespons penekanan dari pengguna.

Contoh berikut menunjukkan bagaimana Anda bisa menggunakan parameter ini, seperti parameter umum lainnya seperti shape dan modifier.

Kartu terisi

Berikut adalah contoh cara mengimplementasikan kartu yang terisi.

Kuncinya di sini adalah penggunaan properti colors untuk mengubah kolom yang diisi {i>color<i}.

@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 muncul sebagai berikut:

Kartu yang Ditingkatkan

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

Anda dapat menggunakan properti elevation untuk mengontrol tampilan ketinggian 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 muncul sebagai berikut:

Kartu dengan Outline

Berikut adalah contoh kartu dengan garis batas. Gunakan paket Composable OutlinedCard.

@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 muncul sebagai berikut:

Batasan

Kartu tidak dilengkapi dengan tindakan scroll atau tutup yang melekat, tetapi dapat terintegrasi dengan composable yang menawarkan fitur-fitur ini. Misalnya, untuk mengimplementasikan geser untuk menutup di kartu, integrasikan dengan composable SwipeToDismiss. Untuk berintegrasi dengan scroll, gunakan pengubah scroll seperti verticalScroll. Lihat halaman Scrolling dokumentasi untuk informasi selengkapnya.

Referensi lainnya

• Dokumen UI Material