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 jenisCardColors
untuk menetapkan warna default keduanya container dan setiap turunannya.enabled
: Jika Anda meneruskanfalse
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 ParameteronClick
. Anda harus menggunakan {i> overload<i} ini jika Anda ingin implementasiCard
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, ) } }
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, ) } }
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, ) } }
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.