Jetpack Compose - BadgeBox
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
BadgedBox di Jetpack Compose
BadgedBox
adalah komponen dalam Jetpack Compose yang menggabungkan konten utama dengan badge secara overlay. Ini memungkinkan Anda menempatkan badge di atas atau di sekitar komponen utama untuk menampilkan informasi tambahan seperti notifikasi, status, atau jumlah item.
Kapan Harus Menggunakan BadgedBox?
-
Kombinasi Konten dan Badge: Gunakan
BadgedBox
ketika Anda ingin menambahkan badge sebagai overlay pada konten utama. Misalnya, menampilkan jumlah notifikasi pada ikon, atau menambahkan status kecil pada gambar profil. -
Posisi Badge yang Fleksibel:
BadgedBox
memberikan fleksibilitas untuk menempatkan badge di berbagai posisi relatif terhadap konten utama.
Perbedaan dengan Badge
-
Struktur:
Badge
adalah komponen sederhana yang hanya menampilkan badge itu sendiri. SementaraBadgedBox
adalah sebuah container yang menggabungkan konten utama dengan badge sebagai overlay. -
Penggunaan:
Badge
digunakan ketika Anda hanya membutuhkan badge tanpa konten utama.BadgedBox
digunakan ketika Anda perlu menambahkan badge pada atau di sekitar komponen utama. -
Fleksibilitas Penempatan:
BadgedBox
memberikan kontrol lebih besar atas posisi badge relatif terhadap konten utama, sedangkanBadge
hanya menampilkan badge itu sendiri.
Parameter/Atribut
@Composable
fun BadgedBox(
badge: @Composable BoxScope.() -> Unit,
modifier: Modifier = Modifier,
content: @Composable BoxScope.() -> Unit,
)
Parameter pada BadgedBox di Jetpack Compose
-
badge:
@Composable BoxScope.() -> Unit
- Komposisi untuk menentukan konten badge yang akan ditampilkan di atas atau di sekitar konten utama. Biasanya digunakan untuk menampilkan elemen kecil seperti angka atau ikon yang menunjukkan status atau notifikasi.
-
modifier:
Modifier
- Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari BadgedBox.
-
content:
@Composable BoxScope.() -> Unit
- Komposisi untuk menentukan konten utama yang akan ditampilkan dalam BadgedBox. Konten ini biasanya merupakan elemen yang badge-nya akan terkait, seperti ikon atau gambar.
Contoh
@Composable
fun DemoBadgeBox(modifier: Modifier = Modifier) {
BadgedBox(
modifier = modifier.padding(24.dp), // Add padding to the BadgedBox
badge = {
Badge {
Text("1")
}
}
) {
Text("The Ngoding")
}
}
✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i