Jetpack Compose - BadgeBox

The Ngoding

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. Sementara BadgedBox 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, sedangkan Badge 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")
    }
}

navigationbar


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

Video

The Ngoding

13 Alasan Jetpack Compose Lebih Baik untuk Pengembangan Aplikasi Android

Cong Fandi

Jetpack Compose - Surface

Cong Fandi

Jetpack Compose - CutCornerShape

Cong Fandi

Jetpack Compose - RoundedCornerShape

Cong Fandi

Jetpack Compose - CircleShape

Cong Fandi

Jetpack Compose - ConstraintSet

Cong Fandi

Jetpack Compose - BadgeBox

Cong Fandi

Video

The Ngoding

Tags