Przełącz

Komponent Switch umożliwia użytkownikom przełączanie się między 2 stanami: zaznaczony. i odznaczona. W aplikacji możesz użyć przełącznika, aby pozwolić użytkownikowi na wykonanie jednej z tych czynności: :

• Włącz lub wyłącz ustawienie.
• Włączanie i wyłączanie funkcji.
• Wybierz opcję.

Komponent składa się z 2 części: kciuka i ścieżki dźwiękowej. Kciuk w górę to element, który można przeciągać a ścieżka dźwiękowa stanowi tło. Użytkownik może przeciągnąć kciuk w lewo lub w prawo, aby zmienić stan przełącznika. Mogą też kliknąć użyj przełącznika, aby ją sprawdzić i wyczyścić.

Rysunek 1. Komponent przełącznika.

Implementacja podstawowa

Pełną definicję interfejsu API znajdziesz w dokumentacji Switch. Oto niektóre z kluczowych parametrów, jakich możesz potrzebować:

• checked: początkowy stan przełączenia.
• onCheckedChange: wywołanie zwrotne, które jest wywoływane, gdy stan funkcji zmiany ustawień.
• enabled – określa, czy przełącznik jest włączony czy wyłączony.
• colors: kolory przełącznika.

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

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

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

Gdy nie zaznaczysz tego pola, implementacja wygląda tak:

Rysunek 2. niezaznaczony przełącznik.

Oto wygląd opcji po zaznaczeniu:

Rysunek 3. Zaznaczony przełącznik.

Implementacja zaawansowana

Parametry podstawowe, których warto użyć przy implementowaniu bardziej zaawansowanych są następujące:

• thumbContent: umożliwia dostosowanie wyglądu kciuka zaznaczono.
• colors: umożliwia dostosowanie koloru ścieżki i miniatury.

Niestandardowa kciuk

Możesz przekazać dowolną funkcję kompozycyjną dla parametru thumbContent, aby utworzyć niestandardową kciuk. Oto przykład przełącznika z ikoną niestandardową kciuk:

@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 niezaznaczony wygląd jest taki sam jak w przykładzie poprzedniej sekcji. Po zaznaczeniu tej opcji implementacja wygląda jednak tak: następujące:

Rysunek 4. Przełącznik z niestandardową ikoną zaznaczoną.

Kolory niestandardowe

Z przykładu poniżej dowiesz się, jak użyć parametru color [kolory], aby: zmienić kolor kciuka i ścieżki przełącznika, biorąc pod uwagę, czy jest zaznaczone.

@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 interfejsu Material Design