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 →

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ż specjalne przyciski, takie jak przyciski z ikonami i przyciski przełączania, które są zdefiniowane jako osobne komponenty w Jetpack Compose Glimmer.

Domyślny

Duży

Anatomia

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

Rozmiary

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

Stany

Przyciski w Jetpack Compose Glimmer zmieniają swój wygląd, aby informować o swoim stanie.

• Włączony: domyślny stan interaktywnego przycisku.
• Zaznaczony: gdy przycisk jest zaznaczony, stosuje się do niego GlimmerTheme.depthEffectLevels.level1 i wyróżnienie 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 i ikonami

Podstawowy przycisk zawiera tylko etykietę tekstową, ale 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 i na końcu:

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

Grupy przycisków

Komponent ButtonGroup umożliwia grupowanie przycisków w przewijany wiersz który działa jako kontroler fokusu. Gdy użytkownik przewija, fokus automatycznie przesuwa się, aby wyróżnić przycisk odpowiadający bieżącej pozycji przewijania.

Przykład: grupy przycisków

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

Kontrola fokusu w grupach przycisków

Aby ręcznie kontrolować wybór, możesz przenieść fokus na dowolny przycisk w grupie.

Działanie przewijania możesz dostosowywać za pomocą stanu ButtonGroup:

1. Zadeklaruj stan za pomocą rememberButtonGroupState.
2. Przekaż go do komponentu ButtonGroup.
3. Aby przewinąć do określonego elementu i automatycznie przenieść na niego fokus, wywołaj animateScrollToItem (lub scrollToItem w przypadku natychmiastowego przewijania).

Ten kod powoduje przeniesienie fokusu z jednego przycisku na drugi po kliknięciu:

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