Jetpack Compose - Card

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

Card adalah sebuah komponen dalam Jetpack Compose yang digunakan untuk menampilkan konten dengan latar belakang berbentuk kartu. Card biasanya digunakan untuk mengelompokkan konten yang terkait bersama dan memberikan tampilan visual yang lebih menarik.

Kapan Sebaiknya Digunakan?

Card sebaiknya digunakan ketika Anda ingin menampilkan konten terkait bersama, seperti informasi tentang produk, konten dalam daftar, atau bagian dari UI yang ingin dipisahkan dengan tampilan visual berbentuk kartu. Ini membantu membedakan konten dari latar belakang dan membuatnya lebih menonjol.

Penjelasan

• Card: Digunakan untuk menampilkan konten dengan latar belakang berbentuk kartu, membantu memisahkan dan membedakan konten dari latar belakangnya.

• Kapan Sebaiknya Digunakan: Ketika Anda ingin mengelompokkan konten terkait bersama dan memberikan tampilan visual yang lebih menarik, misalnya dalam menampilkan informasi produk atau konten dalam daftar.

Dengan menggunakan Card, Anda dapat meningkatkan tampilan visual aplikasi Anda dan membuat konten terkait terlihat lebih teratur dan menonjol.

Parameter/Atribut

@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
)

Parameter pada Card di Jetpack Compose

• onClick: () -> Unit

  • Aksi yang akan dijalankan ketika Card diklik.

• modifier: Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari Card.

• enabled: Boolean

  • Menentukan apakah Card dapat berinteraksi dengan pengguna atau tidak.

• shape: Shape

  • Bentuk dari Card, misalnya RectangleShape, RoundedCornerShape, dsb.

• colors: CardColors

  • Warna-warna yang digunakan untuk mengatur tampilan Card, seperti background dan tint.

• elevation: CardElevation

  • Elevasi (kedalaman visual) dari Card untuk memberikan tampilan bayangan.

• border: BorderStroke?

  • Garis pinggir (border) dari Card. Jika null, berarti Card tidak memiliki border.

• interactionSource: MutableInteractionSource

  • Sumber interaksi yang merepresentasikan interaksi pengguna dengan Card.

• content: @Composable ColumnScope.() -> Unit

  • Komposisi untuk menentukan konten yang akan ditampilkan di dalam Card.

Penjelasan

• onClick: Aksi yang dijalankan ketika pengguna mengklik Card.

• modifier: Modifier untuk menyesuaikan tata letak atau gaya visual Card.

• enabled: Menentukan apakah Card dapat berinteraksi dengan pengguna atau tidak.

• shape: Bentuk dari Card, seperti RectangleShape atau RoundedCornerShape.

• colors: Warna-warna yang digunakan untuk mengatur tampilan Card, termasuk background dan tint.

• elevation: Menentukan kedalaman visual dari Card untuk memberikan efek bayangan.

• border: Garis pinggir (border) dari Card, dapat ditentukan untuk memberikan detail tambahan.

• interactionSource: Sumber interaksi yang merepresentasikan interaksi pengguna dengan Card.

• content: Komposisi untuk menentukan konten yang akan ditampilkan di dalam Card, biasanya menggunakan ColumnScope untuk menata konten dalam kolom.

Contoh

@Composable
fun DemoCard(modifier: Modifier = Modifier) {
    Column {
        Card(
            onClick = { /*TODO*/ },
            border = BorderStroke(1.dp, Color.Black),
            colors = CardDefaults.cardColors(),
        ) {
            Column {
                Text(text = "This is a card", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

Video