Rozetler

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

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

API yüzeyi

Uygulamanızda rozetleri uygulamak için BadgedBox bileşenini kullanın. Sonuçta bir kapsayıcıdır. Görünümü, aşağıdaki iki temel parametreyle kontrol edersiniz:

• content: BadgedBox'un içerdiği birleştirilebilir içerik. Genellikle Icon.
• badge: İçeriğin üzerindeki rozet olarak görünen kompozisyon. Genellikle özel Badge bileşenidir.

Temel örnek

Bu kod snippet'inde BadgedBox işlevinin 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 öğesiyle örtüşen bir rozet gösterilmektedir. Kodda aşağıdakilere dikkat edin:

• BadgedBox genel kapsayıcı görevi görür.
• BadgedBox öğesinin badge parametresi için argüman Badge. Badge bağımsız değişkeninin kendi bağımsız değişkenleri olmadığından uygulama, küçük bir kırmızı daire olan varsayılan rozeti gösterir.
• Icon, BadgedBox öğesinin content parametresi için argüman görevi görür. Rozetin gösterildiği simgedir. Bu durumda, posta simgesi gösterilir.

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

Ayrıntılı örnek

Aşağıdaki snippet'te, rozete kullanıcı işlemlerine yanıt veren değerleri nasıl gösterebileceğiniz gösterilmektedir.

@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 alışveriş sepetindeki öğe sayısını gösteren bir rozet içeren bir 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çeriği için Text bileşeni rozet içinde görünür. Bu durumda, alışveriş sepetindeki öğelerin sayısını gösterir.

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

Ek kaynaklar

• 3. Materyal: Rozetler
• BadgedBox
• Badge