Jetpack Compose - ElevatedCard

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

ElevatedCard adalah sebuah komponen dalam Jetpack Compose yang mirip dengan Card, namun memiliki elevasi (bayangan) yang lebih besar untuk memberikan tampilan yang lebih menonjol.

Kapan Sebaiknya Digunakan?

ElevatedCard sebaiknya digunakan ketika Anda ingin menyorot atau menonjolkan sebuah konten atau elemen tertentu dalam tata letak aplikasi Anda. Ini memberikan efek visual yang lebih menarik daripada Card standar.

Perbedaan dengan Card

• ElevatedCard: Memiliki elevasi yang lebih besar, sehingga memberikan efek bayangan yang lebih kuat dan membuatnya menonjol lebih dari Card biasa.

• Card: Lebih sederhana, tanpa efek bayangan yang kuat seperti pada ElevatedCard.

Penjelasan

• ElevatedCard: Digunakan untuk menyorot atau menonjolkan sebuah konten atau elemen dalam tata letak aplikasi dengan elevasi yang lebih besar.

• Kapan Sebaiknya Digunakan: Ketika Anda ingin membuat sebuah elemen atau konten terlihat menonjol dalam tata letak aplikasi.

• Perbedaan dengan Card: ElevatedCard memiliki elevasi yang lebih besar dan efek bayangan yang lebih kuat daripada Card standar.

Dengan menggunakan ElevatedCard, Anda dapat meningkatkan tampilan visual aplikasi Anda dengan menyorotkan elemen-elemen penting atau menonjolkan bagian-bagian tertentu dari UI Anda.

Parameter/Atribut

@Composable
fun ElevatedCard(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.elevatedShape,
    colors: CardColors = CardDefaults.elevatedCardColors(),
    elevation: CardElevation = CardDefaults.elevatedCardElevation(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
) 

Parameter pada ElevatedCard di Jetpack Compose

• onClick: () -> Unit

  • Aksi yang akan dijalankan ketika ElevatedCard diklik.

• modifier: Modifier

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

• enabled: Boolean

  • Menentukan apakah ElevatedCard dapat berinteraksi dengan pengguna atau tidak.

• shape: Shape

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

• colors: CardColors

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

• elevation: CardElevation

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

• interactionSource: MutableInteractionSource

  • Sumber interaksi yang merepresentasikan interaksi pengguna dengan ElevatedCard.

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

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

Penjelasan

• onClick: Aksi yang dijalankan ketika pengguna mengklik ElevatedCard.

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

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

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

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

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

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

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

Contoh

@Composable
@Composable
fun DemoElevatedCard(modifier: Modifier = Modifier) {
    ElevatedCard(onClick = { /*TODO*/ }) {
        Column {
            Text(text = "This is an elevated card", modifier = Modifier.padding(16.dp))
        }
    }
}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video