Jetpack Compose - OutlinedCard

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
OutlinedCard adalah sebuah komponen dalam Jetpack Compose yang mirip dengan Card, namun memiliki garis pinggir (outline) yang terlihat.
Kapan Sebaiknya Digunakan?
OutlinedCard sebaiknya digunakan ketika Anda ingin menyorot atau memisahkan sebuah elemen atau konten dengan garis pinggir yang terlihat, namun tidak memerlukan elevasi (bayangan) yang besar seperti pada ElevatedCard.
Perbedaan dengan Card
-
OutlinedCard: Memiliki garis pinggir yang terlihat untuk memberikan tampilan yang lebih menonjol daripada Card biasa.
-
Card: Lebih sederhana, tanpa garis pinggir yang terlihat seperti pada OutlinedCard.
Perbedaan dengan ElevatedCard
-
OutlinedCard: Memiliki garis pinggir yang terlihat, tetapi tidak memiliki elevasi (bayangan) yang besar seperti ElevatedCard.
-
ElevatedCard: Memiliki elevasi yang lebih besar dan efek bayangan yang kuat untuk membuat konten menonjol dari latar belakang.
Penjelasan
-
OutlinedCard: Digunakan untuk menyorot atau memisahkan sebuah elemen atau konten dengan garis pinggir yang terlihat.
-
Kapan Sebaiknya Digunakan: Ketika Anda ingin menyorot atau memisahkan sebuah elemen atau konten dengan garis pinggir yang terlihat, tetapi tidak memerlukan elevasi (bayangan) yang besar.
-
Perbedaan dengan Card: OutlinedCard memiliki garis pinggir yang terlihat, sementara Card tidak memiliki garis pinggir yang terlihat.
-
Perbedaan dengan ElevatedCard: ElevatedCard memiliki elevasi (bayangan) yang besar dan efek bayangan yang kuat, sedangkan OutlinedCard tidak memiliki elevasi yang besar.
Dengan menggunakan OutlinedCard, Anda dapat menambahkan elemen visual tambahan untuk memisahkan atau menyorot konten dalam tata letak aplikasi Anda.
Parameter/Atribut
@Composable
fun OutlinedCard(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = CardDefaults.outlinedShape,
colors: CardColors = CardDefaults.outlinedCardColors(),
elevation: CardElevation = CardDefaults.outlinedCardElevation(),
border: BorderStroke = CardDefaults.outlinedCardBorder(enabled),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable ColumnScope.() -> Unit
)
Parameter pada OutlinedCard di Jetpack Compose
-
onClick:
() -> Unit
- Aksi yang akan dijalankan ketika OutlinedCard diklik.
-
modifier:
Modifier
- Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari OutlinedCard.
-
enabled:
Boolean
- Menentukan apakah OutlinedCard dapat berinteraksi dengan pengguna atau tidak.
-
shape:
Shape
- Bentuk dari OutlinedCard, misalnya RectangleShape, RoundedCornerShape, dsb.
-
colors:
CardColors
- Warna-warna yang digunakan untuk mengatur tampilan OutlinedCard, seperti background dan tint.
-
elevation:
CardElevation
- Elevasi (kedalaman visual) dari OutlinedCard untuk memberikan tampilan bayangan.
-
border:
BorderStroke
- Garis pinggir (border) dari OutlinedCard.
-
interactionSource:
MutableInteractionSource
- Sumber interaksi yang merepresentasikan interaksi pengguna dengan OutlinedCard.
-
content:
@Composable ColumnScope.() -> Unit
- Komposisi untuk menentukan konten yang akan ditampilkan di dalam OutlinedCard.
Penjelasan
-
onClick: Aksi yang dijalankan ketika pengguna mengklik OutlinedCard.
-
modifier: Modifier untuk menyesuaikan tata letak atau gaya visual OutlinedCard.
-
enabled: Menentukan apakah OutlinedCard dapat berinteraksi dengan pengguna atau tidak.
-
shape: Bentuk dari OutlinedCard, seperti RectangleShape atau RoundedCornerShape.
-
colors: Warna-warna yang digunakan untuk mengatur tampilan OutlinedCard, termasuk background dan tint.
-
elevation: Menentukan kedalaman visual dari OutlinedCard untuk memberikan efek bayangan.
-
border: Garis pinggir (border) dari OutlinedCard, menyesuaikan tampilan sesuai dengan status
enabled
. -
interactionSource: Sumber interaksi yang merepresentasikan interaksi pengguna dengan OutlinedCard.
-
content: Komposisi untuk menentukan konten yang akan ditampilkan di dalam OutlinedCard, biasanya menggunakan ColumnScope untuk menata konten dalam kolom.
Contoh
@Composable
fun DemoOutlinedCard(modifier: Modifier = Modifier) {
OutlinedCard(onClick = { /*TODO*/ }) {
Column {
Text(text = "This is an outlined card", modifier = Modifier.padding(16.dp))
}
}
}
✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i