Badge

Gunakan badge untuk menampilkan elemen visual kecil untuk menunjukkan status atau nilai numerik pada composable lain. Berikut adalah beberapa skenario umum Anda dapat menggunakan badge:

  • Notifikasi: Menampilkan jumlah notifikasi yang belum dibaca di ikon aplikasi atau lonceng notifikasi.
  • Pesan: Menunjukkan pesan baru atau belum dibaca dalam aplikasi chat.
  • Update status: Menampilkan status tugas, misalnya "selesai". "di kemajuan," atau "gagal".
  • Jumlah keranjang: Menampilkan jumlah item di keranjang belanja pengguna.
  • Konten baru: Soroti konten atau fitur baru yang tersedia bagi pengguna.
Contoh komponen badge yang berbeda.
Gambar 1. Contoh badge

Platform API

Gunakan composable BadgedBox untuk menerapkan badge di aplikasi Anda. Ini pada akhirnya adalah kontainer. Anda mengontrol tampilannya dengan dua parameter:

  • content: Konten composable yang dimuat BadgedBox. Biasanya Icon.
  • badge: Composable yang muncul sebagai badge di atas konten. Biasanya composable Badge khusus.

Contoh dasar

Cuplikan kode ini menunjukkan implementasi dasar BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

Contoh ini menampilkan badge yang tumpang-tindih dengan composable Icon yang disediakan. Catatan kode berikut ini:

  • BadgedBox berfungsi sebagai penampung keseluruhan.
  • Argumen untuk parameter badge dari BadgedBox adalah Badge. Karena Badge tidak memiliki argumen sendiri, aplikasi akan menampilkan argumen default lencana, yang berupa lingkaran kecil berwarna merah.
  • Icon berfungsi sebagai argumen untuk parameter content dari BadgedBox. Ini adalah ikon tempat lencana muncul. Dalam hal ini, itu adalah ikon email.

Seperti inilah tampilannya:

Badge sederhana yang tidak berisi konten.
Gambar 2. Penerapan badge minimal.

Contoh mendetail

Cuplikan berikut menunjukkan cara menampilkan nilai dalam badge yang merespons tindakan pengguna.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}
Badges.kt

Contoh ini menerapkan ikon keranjang belanja dengan badge yang menampilkan jumlah item di keranjang pengguna.

  • BadgedBox hanya ditampilkan jika jumlah item lebih dari 0.
  • Argumen untuk containerColor dan contentColor mengontrol tampilan lencana.
  • Composable Text untuk slot konten Badge muncul dalam lencana. Dalam hal ini, halaman menampilkan jumlah item dalam keranjang.

Implementasi ini muncul sebagai berikut:

Penerapan badge yang berisi jumlah item dalam keranjang belanja.
Gambar 3. Badge yang menampilkan jumlah item dalam keranjang belanja.

Referensi lainnya