Composable Card
berfungsi sebagai penampung Desain Material untuk UI Anda.
Kartu biasanya menampilkan satu bagian 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.
Mode ini adalah fokus untuk menggambarkan satu bagian konten yang membedakan
Card
dari penampung lainnya. 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.
Penerapan dasar
Card
berperilaku seperti penampung lainnya di Compose. Anda mendeklarasikan kontennya dengan
memanggil composable lain di dalamnya. Misalnya, pertimbangkan bagaimana Card
berisi
panggilan ke Text
dalam contoh minimal berikut:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
Implementasi lanjutan
Lihat referensi untuk mengetahui 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 ditinggikan di atas latar belakang.colors
: Menggunakan jenisCardColors
untuk menetapkan warna default penampung dan turunan apa pun.enabled
: Jika Anda meneruskanfalse
untuk parameter ini, kartu akan muncul sebagai dinonaktifkan dan tidak merespons input pengguna.onClick
: Biasanya,Card
tidak menerima peristiwa klik. Dengan demikian, overload utama yang ingin Anda perhatikan adalah hal yang menentukan parameteronClick
. Anda harus menggunakan overload ini jika ingin penerapanCard
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, ) } }
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 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, ) } }
Implementasi ini muncul sebagai berikut:
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, ) } }
Implementasi ini muncul sebagai 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 composable SwipeToDismiss
. Untuk berintegrasi
dengan scroll, gunakan pengubah scroll seperti verticalScroll
. Lihat dokumentasi
Scroll untuk mengetahui informasi selengkapnya.