Przyciski przełączania w Jetpack Compose Glimmer

Obsługiwane urządzenia z XR
Ten przewodnik pomoże 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 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 okularów z wyświetlaczem, aby zapewnić wyraźne przejścia wizualne kształtu i koloru. 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 zapewniają dodatkowy kontekst.

W innych przypadkach użycia dostępne są też standardowe przyciski i przyciski z ikonami.

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

Anatomia

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

Część Opis

Kontener

Animuje między kształtem okrągłym (niezaznaczony) a zaokrąglonym prostokątem (zaznaczony).

Etykieta

Zwykle element kompozycyjny Text.

Ikony (opcjonalnie)

Miejsca na początku lub na końcu, które mogą się różnić w zależności od stanu.

Rozmiary

Podobnie jak standardowe przyciski, przyciski przełączania obsługują 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ą ToggleButtonDefaults.animateShape. Tworzy to płynne przejście między tymi stanami:

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

Animacja

W przypadku animacji przyciski przełączania używają tych ustawień domyślnych:

  • animateShape: udostępnia Shape, który interpoluje rozmiary rogó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 stanie 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) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}