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 →
Görüntüleme Gözlüğü
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. Ayrıca, Jetpack Compose Glimmer'da ayrı bileşenler olarak tanımlanan simge düğmeler ve açma/kapatma düğmeleri gibi özel düğmeler de vardır.

Varsayılan

Jetpack Compose Glimmer'daki bazı farklı düğme stillerine örnek. Bu örneklerde üç düğme durumu olan varsayılan, orta boyutlu düğmeler gösterilmektedir: Etkin (1), Odaklanılmış (2) ve Basılmış (3).

Büyük

Jetpack Compose Glimmer'daki bazı farklı düğme stillerine örnek. Bu örneklerde, üç düğme durumu olan büyük boyutlu düğmeler gösterilmektedir: Etkin (1), Odaklanılmış (2) ve Basılmış (3).

Anatomi

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

Bölüm Açıklama

Container

Düğmenin arka plan yüzeyi.

Şirket

İşlemi açıklayan metin.

Simge (isteğe bağlı)

Baştaki veya sondaki görsel göstergeler.

Boyutlar

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

Boyut Minimum yükseklik Varsayılan kullanım

Orta

48.dp

Standart işlemler ve listeler (varsayılan).

Büyük

72.dp

Yüksek vurgulu işlemler veya birincil ekran giriş noktaları.

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 içeren düğme

Aşağıdaki kod, metin içeren standart bir düğme oluşturur:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

Örnek: Önde ve arkada simgeler bulunan düğmeler

Ek bağlam bilgisi sağlamak için metnin başına (leadingIcon kullanarak) veya sonuna (trailingIcon kullanarak) simgeler de ekleyebilirsiniz.

Aşağıdaki kod, başında simge bulunan bir düğme oluşturur:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}