Przyciski przełączania w Jetpack Compose Glimmer

Odpowiednie urządzenia XR
Te wskazówki pomogą Ci tworzyć rozwiązania na te typy urządzeń XR.
Więcej informacji o typach urządzeń z XR
Okulary wyświetlające
Więcej informacji o typach urządzeń z XR

W Jetpack Compose Glimmer ToggleButton to interaktywny komponent, który zmienia swój wygląd w zależności od stanu zaznaczenia. Przyciski przełączania są zoptymalizowane pod kątem wyświetlania na okularach, aby zapewniać wyraźne przejścia wizualne w kształcie i kolorze. Te przejścia wskazują, kiedy działanie lub ustawienie jest aktywne.

Używaj przycisków przełączania, aby udostępniać działania, które można włączać i wyłączać. W przeciwieństwie do przełączników z samymi ikonami przycisk przełączania wyświetla głównie tekst, ale obsługuje też opcjonalne miejsca na ikony, które mogą dostarczać dodatkowych informacji.

W innych przypadkach możesz też używać standardowych przycisków i przycisków z ikonami.

Rysunek 1. Przykład przycisku przełączania w bibliotece Jetpack Compose Glimmer używanego do odtwarzania i wstrzymywania w układzie interfejsu.

Anatomia

Przycisk przełączania składa się z kontenera, który zmienia stan, oraz etykiety z opcjonalnymi ikonami.

Część Opis

Kontener

Animacja przechodzi od okrągłego kształtu (niezaznaczonego) do zaokrąglonego prostokąta (zaznaczonego).

Etykieta

Zwykle jest to funkcja kompozycyjna Text.

Ikony (opcjonalnie)

Początkowe lub końcowe miejsca, które mogą się różnić w zależności od stanu.

Rozmiary

Podobnie jak standardowe przyciski, przyciski przełączania mają 2 warianty rozmiaru:

Rozmiar Minimalna wysokość Domyślne użycie

Średni

48.dp

Domyślny rozmiar interaktywny.

Duży

72.dp

Przełączniki główne lub o wysokim kontraście.

Domyślne ustawienia przycisku przełączania

Domyślnie przyciski przełączania używają ikony ToggleButtonDefaults.animateShape. Umożliwia to płynne przejście między tymi stanami:

Klasa ToggleButtonColors zarządza rozdzielczością kolorów w tych stanach:

Animacja

Przyciski przełączania używają tych domyślnych ustawień animacji:

  • animateShape: Zapewnia Shape, który interpoluje rozmiary narożników za pomocą specyfikacji animacji sprężynowej (stiffness = 600f).
  • colors: funkcja fabryczna do dostosowywania kolorów tła i treści w obu stanach.
  • CheckedShape: statyczny RoundedCornerShape(20.dp) używany w przypadku stanu zaznaczenia.
  • contentPadding: dziedziczy z ButtonDefaults.contentPadding.

Przykład: przycisk przełączania

Ten kod tworzy podstawowy przycisk przełączania:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}

Przykład: przycisk przełączania z ikoną na początku

Ten kod tworzy przycisk przełączania z ikoną na początku:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}