Przełącz

Komponent Switch umożliwia użytkownikom przełączanie się między 2 stanami: zaznaczone i odznaczone. W aplikacji możesz za pomocą przełącznika umożliwić użytkownikowi wykonanie jednej 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: kciuka i ścieżki. Kciuk to element przełącznika, który można przeciągnąć, a ścieżka dźwiękowa jest tłem. Użytkownik może zmienić stan przełącznika, przeciągając kciuk w lewo lub w prawo. Mogą też dotknąć przełącznika, aby go sprawdzić i usunąć dane.

Rysunek 1. Komponent przełącznika.

Implementacja podstawowa

Pełną definicję interfejsu API znajdziesz w dokumentacji Switch. Oto kilka kluczowych parametrów, których możesz używać:

• checked: początkowy stan przełącznika.
• onCheckedChange: wywołanie zwrotne, które jest wywoływane w przypadku zmiany stanu przełącznika.
• enabled: określa, czy przełącznik jest włączony czy wyłączony.
• colors: kolory używane przez przełącznik.

Poniższy przykład przedstawia minimalną implementację funkcji kompozycyjnej Switch.

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

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

Gdy ta opcja jest odznaczona, implementacja wygląda tak:

Rysunek 2. Niezaznaczony przełącznik.

Tak wygląda po zaznaczeniu tej opcji:

Rysunek 3. Zaznaczony przełącznik.

Implementacja zaawansowana

Główne parametry, które możesz wykorzystać przy wdrażaniu bardziej zaawansowanego przełącznika, to:

• thumbContent: to ustawienie służy do dostosowania wyglądu kciuka po zaznaczeniu.
• colors: to ustawienie służy do dostosowania koloru ścieżki i miniatury.

Niestandardowa kciuk

Aby utworzyć niestandardową miniaturę, możesz przekazać parametr thumbContent dowolnego elementu kompozycyjnego. Oto przykład przełącznika z ikoną niestandardową:

@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 odznaczenie jest takie samo jak przykład w poprzedniej sekcji. Gdy jednak zaznaczysz tę opcję, implementacja będzie wyglądała tak:

Rysunek 4. Przełącznik z niestandardową ikoną zaznaczonego pola wyboru.

Kolory niestandardowe

Z przykładu poniżej dowiesz się, jak za pomocą parametru kolorów zmienić kolor kciuka i śladu przełącznika, pamiętając o tym, czy przełącznik jest 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

Implementacja wygląda tak:

Rysunek 5. Przełącznik z niestandardowymi kolorami.

Dodatkowe materiały

• Dokumentacja Material UI