Jetpack Compose Glimmer'da açma/kapatma düğmeleri

Uygun XR cihazlar

Bu kılavuz, bu tür XR cihazlar için deneyimler oluşturmanıza yardımcı olur.

XR cihaz türleri hakkında bilgi edinin →

XR cihaz türleri hakkında bilgi edinin →

Jetpack Compose Glimmer'da ToggleButton, işaretli duruma göre görünümünü değiştiren etkileşimli bir bileşendir. Açma/kapatma düğmeleri, şekil ve renkte net görsel geçişler sağlamak için ekran gözlükleri için optimize edilmiştir. Bu geçişler, bir işlemin veya ayarın etkin olduğunu gösterir.

Açılıp kapatılabilen işlemleri göstermek için açma/kapatma düğmelerini kullanın. Yalnızca simge içeren açma/kapatma düğmelerinin aksine, açma/kapatma düğmeleri öncelikle metin içeriğini gösterir ancak ek bağlam için isteğe bağlı simge yuvalarını destekler.

Diğer kullanım alanları için standart düğmeler ve simge düğmeler de vardır.

Anatomi

Açma/kapatma düğmesi, durumlar arasında dönüşen bir kapsayıcı ve isteğe bağlı simgeler içeren bir etiketten oluşur.

Boyutlar

Standart düğmeler gibi, açma/kapatma düğmeleri de iki boyut varyantını destekler:

Açma/kapatma düğmesi varsayılanları

Açma/kapatma düğmeleri varsayılan olarak ToggleButtonDefaults.animateShape simgesini kullanır. Bu, aşağıdaki durumlar arasında sorunsuz bir geçiş sağlar:

• İşaret kaldırıldı: GlimmerTheme.shapes.large (genellikle CircleShape).
• İşaretli: ToggleButtonDefaults.CheckedShape (20.dp köşeli bir RoundedCornerShape).

ToggleButtonColors sınıfı, aşağıdaki durumlar için renk çözünürlüğünü yönetir:

• İşareti kaldırıldı: Varsayılan olarak GlimmerTheme.colors.surface değerine ayarlanır.
• İşaretli: Varsayılan olarak GlimmerTheme.colors.surface değerine ayarlanır.

Animasyon

Açma/kapatma düğmelerinde animasyon için aşağıdaki varsayılanlar kullanılır:

• animateShape: Köşe boyutlarını bir yay animasyonu spesifikasyonu (stiffness = 600f) kullanarak enterpolasyon yapan bir Shape sağlar.
• colors: Her iki durum için de arka plan ve içerik renklerini özelleştirmeye yönelik bir fabrika işlevi.
• CheckedShape: İşaretli durum için kullanılan statik bir RoundedCornerShape(20.dp).
• contentPadding: ButtonDefaults.contentPadding kaynağından devralınır.

Örnek: Açma/kapatma düğmesi

Aşağıdaki kod, temel bir açma/kapatma düğmesi oluşturur:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"

    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it }
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt

Örnek: Önde simge bulunan açma/kapatma düğmesi

Aşağıdaki kod, başında simge bulunan bir açma/kapatma düğmesi oluşturur:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt