Przyciski 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 Button to interaktywny komponent zoptymalizowany pod kątem sterowania za pomocą okularów z wyświetlaczem. Zapewnia on wyraźne wizualne informacje zwrotne o stanie, aby ułatwić użytkownikowi wykonywanie działań.

Przyciski są oparte na systemie powierzchni Jetpack Compose Glimmer, który automatycznie obsługuje właściwości fizyczne, takie jak obramowania i głębia.

Standardowy przycisk zawiera etykietę tekstową i opcjonalne ikony. Możesz go używać do działań głównych lub dodatkowych. Istnieją też przyciski specjalne, takie jak przyciski z ikonami i przyciski przełączania, które są zdefiniowane jako osobne komponenty w Jetpack Compose Glimmer.

Domyślny

Przykład różnych stylów przycisków w Jetpack Compose Glimmer. Te przykłady pokazują domyślne przyciski średniej wielkości z 3 stanami: włączony (1), zaznaczony (2) i naciśnięty (3).

Duży

Przykład różnych stylów przycisków w Jetpack Compose Glimmer. Te przykłady pokazują duże przyciski z 3 stanami: włączony (1), zaznaczony (2) i naciśnięty (3).

Anatomia

Przycisk składa się z kontenera i etykiety z opcjonalnymi ikonami na początku i na końcu.

Część Opis

Kontener

Powierzchnia tła przycisku.

Etykieta

Tekst opisujący działanie.

Ikona (opcjonalnie)

Wskaźniki wizualne na początku lub na końcu.

Rozmiary

Przyciski Jetpack Compose Glimmer obsługują 2 warianty rozmiaru. Wpływają one na minimalną wysokość i wewnętrzne dopełnienie.

Rozmiar Minimalna wysokość Domyślne użycie

Średni

48.dp

Standardowe działania i listy (domyślnie).

Duży

72.dp

Działania o wysokim priorytecie lub główne punkty wejścia na ekran.

Stany

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

  • Włączony: domyślny stan interaktywnego przycisku.
  • Zaznaczony: gdy przycisk jest zaznaczony, stosuje się do niego GlimmerTheme.depthEffectLevels.level1 i podświetlenie obramowania.
  • Naciśnięty: po aktywowaniu na powierzchnię nakładana jest półprzezroczysta biała nakładka.
  • Wyłączony: przycisk nie reaguje na dane wejściowe, a jego wygląd jest dostosowywany.

Domyślne ustawienia przycisków

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

  • Domyślnie przyciski używają GlimmerTheme.typography.bodySmall. Upewnij się, że tekst w przyciskach jest zwięzły i jasno opisuje działanie.
  • Domyślny kształt przycisku to GlimmerTheme.shapes.large. Dzięki temu użytkownicy mogą łatwo rozpoznawać przyciski w interfejsie okularów z wyświetlaczem.

Przykład: przycisk z tekstem

Ten kod tworzy standardowy przycisk z tekstem:

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

Przykład: przyciski z ikonami na początku i na końcu

Możesz też dodać ikony na początku (za pomocą leadingIcon) lub na końcu (za pomocą trailingIcon) tekstu, aby zapewnić dodatkowy kontekst.

Ten kod tworzy przycisk z ikoną na początku:

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