Rozetler

Başka bir composable'da durumu veya sayısal değeri belirtmek için küçük bir görsel öğe görüntülemek üzere badge kullanın. Rozet kullanabileceğiniz bazı yaygın senaryolar şunlardır:

• Bildirimler: Okunmamış bildirimlerin sayısını uygulama simgesinde veya bildirim zilinde gösterir.
• Mesajlar: Bir sohbet uygulamasındaki yeni veya okunmamış mesajları gösterir.
• Durum güncellemeleri: Bir görevin durumunu gösterir (ör. "tamamlandı", "devam ediyor" veya "başarısız oldu").
• Sepet miktarı: Kullanıcının alışveriş sepetindeki öğe sayısını gösterin.
• Yeni içerik: Kullanıcının erişebileceği yeni içerikleri veya özellikleri vurgulayın.

API yüzeyi

Uygulamanızda rozetleri uygulamak için BadgedBox composable'ını kullanın. Sonuçta bir kapsayıcıdır. Görünümünü şu iki ana parametreyle kontrol edebilirsiniz:

• content: BadgedBox öğesinin içerdiği birleştirilebilir içerik. Normalde Icon.
• badge: İçeriğin üzerinde rozet olarak görünen composable. Genellikle özel Badge composable'dır.

Temel örnek

Bu kod snippet'inde BadgedBox'nın temel bir uygulaması gösterilmektedir:

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

Bu örnekte, sağlanan Icon composable'ı kaplayan bir rozet gösterilmektedir. Koddaki şu noktalara dikkat edin:

• BadgedBox genel kapsayıcı olarak kullanılır.
• BadgedBox işlevinin badge parametresinin bağımsız değişkeni Badge. Badge'nın kendi bağımsız değişkenleri olmadığı için uygulamada küçük bir kırmızı daire olan varsayılan rozet gösterilir.
• Icon, BadgedBox işlevinin content parametresinin bağımsız değişkeni olarak kullanılır. Rozetin üzerinde göründüğü simgedir. Bu durumda, posta simgesi gösterilir.

Bu özellik şu şekilde görünür:

Ayrıntılı örnek

Aşağıdaki snippet, rozetteki değerleri kullanıcı işlemlerine yanıt verecek şekilde nasıl gösterebileceğinizi gösterir.

@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

Bu örnekte, kullanıcının sepetindeki öğe sayısını gösteren bir rozet içeren alışveriş sepeti simgesi uygulanmaktadır.

• BadgedBox yalnızca öğe sayısı 0'dan fazla olduğunda gösterilir.
• containerColor ve contentColor bağımsız değişkenleri, rozetin görünümünü kontrol eder.
• Badge içerik alanının Text composable'ı rozetin içinde görünür. Bu durumda, alışveriş sepetindeki öğelerin sayısı gösterilir.

Bu uygulama aşağıdaki gibi görünür:

Ek kaynaklar

• Material 3 - Rozetler
• BadgedBox
• Badge