Przyciski z ikonami w Jetpack Compose Glimmer

Obsługiwane urządzenia z XR
Te wskazówki pomogą Ci tworzyć aplikacje na te typy urządzeń z XR.
Więcej informacji o typach urządzeń z XR →
Okulary z wyświetlaczem
Więcej informacji o typach urządzeń z XR →

W Jetpack Compose Glimmer IconButton to kompaktowy, interaktywny komponent służący do udostępniania dodatkowych działań za pomocą jednego kliknięcia.

Przyciski ikon są mniejsze niż standardowe przyciski, ale zachowują fizyczne granice, aby ułatwić interakcję na okularach z wyświetlaczem.

W innych przypadkach użycia dostępne są też standardowe przyciski i przyciski przełączania.

Przykład różnych stylów przycisków ikon w Jetpack Compose Glimmer. Te przykłady pokazują 5 stanów przycisku ikony: włączony (1), zaznaczony (2), naciśnięty (3), wyłączony (4), wyłączony i zaznaczony (5).

Rozmiary i wymiary

Element Wymiar

Minimalny rozmiar kontenera

48 x 48 dp

Rozmiar ikony wewnętrznej

32 x 32 dp

Domyślny odstęp od treści

GlimmerTheme.componentSpacingValues.small

Stany

Przyciski ikon w Jetpack Compose Glimmer zmieniają swój wygląd, aby wskazać swój stan.

  • Włączony: domyślny stan interaktywny.
  • Zaznaczony: stosuje GlimmerTheme.depthEffectLevels.level1 i wyróżnienie obramowania.
  • Naciśnięty: stosuje półprzezroczystą białą nakładkę na powierzchnię.
  • Wyłączony: przycisk jest nieinteraktywny, a informacje zwrotne są usuwane.

Domyślne ustawienia przycisku ikony

W przypadku przycisków ikon obowiązują te ustawienia domyślne:

  • Kształt: domyślnie GlimmerTheme.shapes.large (zwykle okrągły).
  • Kolor: domyślnie GlimmerTheme.colors.surface.
  • Kolor treści: obliczany automatycznie na podstawie koloru tła, chyba że został wyraźnie określony.
  • Odstęp od treści: określa domyślny odstęp między ikoną a krawędzią kontenera.
  • Minimalny rozmiar: stała wartość 48.dp, aby przyciski nie były zbyt małe, by można było z nimi wchodzić w interakcję.
  • Rozmiar ikony: domyślnie GlimmerTheme.iconSizes.small (32.dp).

Przykład: przycisk ikony

Ten kod tworzy przycisk ikony z domyślnymi cechami:

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