Jetpack Compose Glimmer'daki simge 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 IconButton, tek bir dokunuşla ek işlemleri göstermek için kullanılan kompakt ve etkileşimli bir bileşendir.

Simge düğmeler, standart düğmelerden daha küçük görünür ancak ekran gözlüklerinde kolay etkileşim sağlamak için fiziksel bir sınıra sahiptir.

Diğer kullanım alanları için standart düğmeler ve açma/kapatma düğmeleri de vardır.

Jetpack Compose Glimmer'daki bazı farklı simge düğmesi stillerinin örneği. Bu örneklerde beş simge düğmesi durumu gösterilmektedir: Etkin (1), Odaklanılmış (2), Basılmış (3), Devre dışı (4), Devre dışı ve odaklanılmış (5).

Boyutlar ve ölçüler

Öğe Boyut

Minimum kapsayıcı boyutu

48 x 48 dp

Dahili simge boyutu

32 x 32 dp

Varsayılan içerik dolgusu

GlimmerTheme.componentSpacingValues.small

Eyaletler

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

  • Etkin: Varsayılan etkileşimli durum.
  • Odaklanmış: GlimmerTheme.depthEffectLevels.level1 ve odaklanmış kenarlık vurgusunu uygular.
  • Basıldı: Yüzeye yarı şeffaf beyaz bir kaplama uygular.
  • Devre dışı: Düğme etkileşimli değildir ve görsel geri bildirim kaldırılır.

Simge düğmesi varsayılanları

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

  • Şekil: Varsayılan olarak GlimmerTheme.shapes.large (genellikle daire) kullanılır.
  • Renk: Varsayılan olarak GlimmerTheme.colors.surface değerine ayarlanır.
  • İçerik rengi: Açıkça belirtilmediği sürece arka plan renginden otomatik olarak hesaplanır.
  • İçerik dolgusu: Simge ile kapsayıcı kenarı arasındaki varsayılan boşluğu sağlar.
  • Minimum boyut: Düğmelerin etkileşim kurulamayacak kadar küçülmesini önlemek için sabit 48.dp değeri.
  • Simge boyutu: Varsayılan olarak GlimmerTheme.iconSizes.small (32.dp) değerine ayarlanır.

Örnek: Simge düğmesi

Aşağıdaki kod, varsayılan özelliklere sahip bir simge düğmesi oluşturur:

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}