Jetpack Compose Glimmer'daki düğmeler

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 Button, ekran gözlüğü girişine göre optimize edilmiş etkileşimli bir bileşendir. Kullanıcı işlemlerine rehberlik etmek için durumları aracılığıyla net görsel geri bildirim sunar.

Düğmeler, kenarlıklar ve derinlik gibi fiziksel özellikleri otomatik olarak işleyen Jetpack Compose Glimmer yüzey sistemi üzerine kurulmuştur.

Standart düğme, bir metin etiketi ve isteğe bağlı simgeler içerir. Birincil veya ikincil işlemler için kullanabilirsiniz. Jetpack Compose Glimmer'da ayrı bileşenler olarak tanımlanan ikon düğmeleri ve açma/kapatma düğmeleri gibi özel düğmeler de vardır.

Varsayılan

Büyük

Anatomi

Düğme, isteğe bağlı olarak önde ve arkada simgeler içeren bir kapsayıcı ve etiketten oluşur.

Boyutlar

Jetpack Compose Glimmer düğmeleri iki boyut varyantını destekler. Bunlar, minimum yüksekliği ve iç dolguyu etkiler.

Eyaletler

Jetpack Compose Glimmer'daki düğmeler, durumlarını belirtmek için görünümlerini değiştirir.

• Etkin: Etkileşimli bir düğmenin varsayılan durumu.
• Odaklanılmış: Odaklanıldığında düğme, GlimmerTheme.depthEffectLevels.level1 ve odaklanılmış bir kenarlık vurgusu uygular.
• Basılı: Etkinleştirildiğinde yüzeye yarı şeffaf beyaz bir kaplama uygulanır.
• Devre dışı: Düğme, girişe yanıt vermez ve görsel görünümü ayarlanır.

Düğme varsayılanları

Standart düğmeler için aşağıdaki varsayılanlar geçerlidir:

• Düğmeler varsayılan olarak GlimmerTheme.typography.bodySmall kullanır. Düğmelerdeki metnin kısa ve öz olduğundan ve işlemi net bir şekilde tanımladığından emin olun.
• Düğmelerin varsayılan şekli GlimmerTheme.shapes.large'dir. Bu tutarlı yuvarlama, kullanıcıların ekran gözlüğü arayüzündeki düğmeleri tanımlamasına yardımcı olur.

Örnek: Metin ve simgeler içeren düğme

Temel bir düğme yalnızca metin etiketi içerir ancak ek bağlam sağlamak için metnin başına (leadingIcon kullanarak) veya sonuna (trailingIcon kullanarak) simgeler de ekleyebilirsiniz.

Aşağıdaki kod, hem baştaki hem de sondaki simgeye sahip bir düğme oluşturur:

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

Düğme grupları

ButtonGroup composable'ı, düğmeleri kaydırılabilir bir satırda gruplandırmanıza olanak tanır. Bu satır, odak denetleyicisi olarak işlev görür. Kullanıcı kaydırdıkça odak, mevcut kaydırma konumuna karşılık gelen düğmeyi vurgulamak için otomatik olarak hareket eder.

Örnek: Düğme grupları

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

Düğme gruplarında odak kontrolü

Seçimi manuel olarak kontrol etmek için odağı gruptaki herhangi bir düğmeye taşıyabilirsiniz.

ButtonGroup durumunu kullanarak kaydırma davranışını özelleştirin ve kontrol edin:

1. Durumu rememberButtonGroupState ile bildirin.
2. Bunu ButtonGroup composable'ına iletin.
3. Belirli bir öğeye gitmek ve odağı otomatik olarak bu öğeye taşımak için animateScrollToItem (anında kaydırma için scrollToItem) tuşuna basın.

Aşağıdaki kod, tıklama üzerine odağı bir düğmeden diğerine taşır:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt