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 ne zaman 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. Bununla birlikte, ek bağlam için isteğe bağlı simge yuvalarını da 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ı stiffness = 600f yay animasyonu spesifikasyonunu kullanarak enterpolasyon yapan bir Shape sağlar.
• colors: Her iki durum için de arka plan ve içerik renklerini özelleştirmeye yönelik fabrika işlevi.
• CheckedShape: İşaretli durum için kullanılan statik bir RoundedCornerShape(20.dp).
• contentPadding: ButtonDefaults.contentPadding kaynağından devralı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: Başta 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) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt