Rozetler

Durumu belirtmek üzere küçük bir görsel öğe göstermek için rozet kullanın veya başka bir composable'da sayısal bir değer olabilir. Proje yöneticilerinin şu rozetleri kullanabilirsiniz:

  • Bildirimler: Okunmamış bildirimlerin sayısını uygulama simgesinde görüntüleyin veya bildirim zilini devre dışı bırakın.
  • Mesajlar: Bir sohbet uygulamasındaki yeni veya okunmamış mesajları belirtin.
  • Durum güncellemeleri: Görevlerin "tamamlandı", "içinde ilerleme," veya "başarısız" oldu.
  • Alışveriş sepeti miktarı: Bir kullanıcının alışveriş sepetindeki öğe sayısını gösterir.
  • Yeni içerik: Kullanıcıya sunulan yeni içeriği veya özellikleri öne çıkarın.
ziyaret edin.
Rozet bileşeninin farklı örneği.
Şekil 1. Rozet örnekleri
'nı inceleyin.

API yüzeyi

Uygulamanızda rozetleri uygulamak için BadgedBox composable'ı kullanın. Google en nihayetinde bir kapsayıcı. Görünümünü şu iki ana unsurla kontrol edersiniz: parametre:

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

Temel örnek

Bu kod snippet'i, BadgedBox temel uygulamasını gösterir:

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

Bu örnekte, sağlanan Icon composable ile çakışan bir rozet gösterilmektedir. Not kodda şunu görürsünüz:

  • BadgedBox, genel kapsayıcı görevi görür.
  • BadgedBox öğesinin badge parametresi için bağımsız değişken Badge. Badge kendi bağımsız değişkenine sahip olmadığından uygulama, varsayılan değeri görüntüler küçük kırmızı bir daire olan küçük kırmızı bir dairedir.
  • Icon, BadgedBox öğesinin content parametresinin bağımsız değişkeni olarak kullanılır. Google rozetin üzerinde göründüğü simgedir. Bu durumda, bu bir posta simgesidir.

Şu şekilde görünür:

İçerik bulunmayan basit bir rozet.
Şekil 2. Rozet kullanımı minimum düzeydedir.
ziyaret edin.

Ayrıntılı örnek

Aşağıdaki snippet'te, ilgi alanına giren kullanıcıların rozetinde yanıt verebilir.

@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ı.

  • BadgedBox yalnızca öğe sayısı 0'ın üzerinde olduğunda görüntülenir.
  • containerColor ve contentColor için bağımsız değişkenler görünümü kontrol eder önemli bir rol oynar.
  • Badge adlı içerik alanı için Text composable şu konumda görünür: sahip olmanız gerekir. Bu örnekte, alışveriş sepetindeki öğelerin sayısı gösterilir.

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

Bir alışveriş sepetindeki öğe sayısını içeren bir rozet uygulaması.
Şekil 3. Alışveriş sepetindeki öğe sayısını gösteren bir rozet.

Ek kaynaklar