Rozetler

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

  • Bildirimler: Bir uygulama simgesinde veya bildirim zilinde okunmamış bildirimlerin sayısını gösterir.
  • Mesajlar: 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").
  • Alışveriş sepeti miktarı: Kullanıcının alışveriş sepetindeki öğe sayısını gösterir.
  • Yeni içerik: Kullanıcıya sunulan yeni içerikleri veya özellikleri vurgulayın.
Rozet bileşeninin farklı örnekleri.
Şekil 1. Rozet örnekleri

API yüzeyi

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

  • content: BadgedBox tarafından içerilen birleştirilebilir içerik. Genellikle Icon.
  • badge: İçerik üzerinde rozet olarak görünen composable. Genellikle özel Badge composable.

Temel örnek

Bu kod snippet'i, BadgedBox için temel bir uygulamayı gösterir:

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

Bu örnekte, sağlanan Icon composable ile çakışan bir rozet gösterilmektedir. Kodda şunlara dikkat edin:

  • BadgedBox, genel kapsayıcı görevi görür.
  • BadgedBox işlevinin badge parametresi için bağımsız değişken Badge. Badge öğesinin kendi bağımsız değişkenleri olmadığından uygulama, varsayılan rozeti (küçük kırmızı bir daire) gösterir.
  • Icon, BadgedBox işlevinin content parametresi için bağımsız değişken olarak kullanılır. Rozetin üzerinde göründüğü simgedir. Bu durumda, posta simgesi gösterilir.

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

İçerik barındırmayan basit bir rozet.
Şekil 2. Rozet uygulamasının minimum düzeyde olması.

Ayrıntılı örnek

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

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableIntStateOf(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")
        }
    }
}

Bu örnekte, kullanıcının alışveriş sepetindeki ürün 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ını gösterir.

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

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

Ek kaynaklar