Przełącz

Komponent Switch umożliwia użytkownikom przełączanie się między dwoma stanami: zaznaczonym i niezaznaczonym. W aplikacji możesz użyć przełącznika, który pozwoli użytkownikowi wykonać jedną z tych czynności:

  • Włącz lub wyłącz ustawienie.
  • Włącz lub wyłącz funkcję.
  • Wybierz opcję.

Komponent składa się z 2 części: suwaka i ścieżki. Suwak to element przełącznika, który można przeciągać, a ścieżka to tło. Użytkownik może przeciągnąć suwak w lewo lub w prawo, aby zmienić stan przełącznika. Mogą też dotknąć przełącznika, aby zaznaczyć lub odznaczyć to pole.

Przykłady komponentu Przełącznik w trybie jasnym i ciemnym.
Rysunek 1. Komponent przełącznika.

Implementacja podstawowa

Pełną definicję interfejsu API znajdziesz w Switch. Oto niektóre z najważniejszych parametrów, których możesz potrzebować:

  • checked: stan początkowy przełącznika.
  • onCheckedChange: wywołanie zwrotne, które jest wywoływane, gdy zmienia się stan przełącznika.
  • enabled: czy przełącznik jest włączony czy wyłączony.
  • colors: kolory użyte w przypadku przełącznika.

Poniższy przykład to minimalna implementacja funkcji kompozycyjnej Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

Gdy to pole wyboru nie jest zaznaczone, implementacja wygląda tak:

Podstawowy przełącznik, który jest odznaczony.
Rysunek 2. Niezaznaczony przełącznik.

Tak wygląda zaznaczone pole wyboru:

Podstawowy przełącznik, który jest zaznaczony.
Rysunek 3. Zaznaczony przełącznik.

Implementacja zaawansowana

Główne parametry, których możesz użyć podczas wdrażania bardziej zaawansowanego przełącznika, to:

  • thumbContent: użyj tej opcji, aby dostosować wygląd suwaka, gdy jest zaznaczony.
  • colors: użyj tej opcji, aby dostosować kolor ścieżki i suwaka.

Niestandardowa miniatura

Aby utworzyć niestandardową miniaturę, możesz przekazać dowolny element kompozycyjny do parametru thumbContent. Poniżej znajdziesz przykład przełącznika, który używa niestandardowej ikony dla suwaka:

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

W tej implementacji wygląd niezaznaczonego pola jest taki sam jak w przykładzie z poprzedniej sekcji. Jednak po zaznaczeniu to wdrożenie wygląda tak:

Przełącznik, który używa parametru thumbContent do wyświetlania niestandardowej ikony po zaznaczeniu.
Rysunek 4. Przełącznik z niestandardową ikoną zaznaczenia.

Kolory niestandardowe

Poniższy przykład pokazuje, jak za pomocą parametru colors zmienić kolor suwaka i jego ścieżki w zależności od tego, czy jest on zaznaczony.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

Ta implementacja wygląda tak:

Przełącznik, który używa parametru colors do wyświetlania przełącznika z niestandardowymi kolorami zarówno suwaka, jak i ścieżki.
Rysunek 5. Przełącznik z niestandardowymi kolorami.

Dodatkowe materiały