Przełącz

Komponent Switch pozwala użytkownikom przełączać się między 2 stanami: zaznaczonym i niezaznaczonym. W aplikacji możesz użyć przełącznika, aby umożliwić użytkownikowi wykonanie jednej z tych czynności:

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

Składa się z 2 części: miniatury i ścieżki. Palec to element przeciągalny przełącznika, a ścieżka to tło. Użytkownik może przeciągnąć suwak w lewo lub w prawo, aby zmienić stan przełącznika. Może też kliknąć przełącznik, aby sprawdzić i wyczyścić dane.

Rysunek 1. Komponent przełącznika.

Implementacja podstawowa

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

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

Poniżej znajdziesz minimalną implementację kompozytu Switch.

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

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

Gdy ta opcja nie jest zaznaczona, implementacja wygląda tak:

Rysunek 2. niezaznaczony przełącznik.

Gdy opcja jest zaznaczona, wygląda tak:

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: służy do dostosowywania wyglądu miniatury po zaznaczeniu.
• colors: użyj tego, aby dostosować kolor utworu i miniatury.

Niestandardowa miniatura

Aby utworzyć niestandardowy miniaturę, możesz podać dowolny komponent w parametrze thumbContent. Poniżej znajdziesz przykład przełącznika, który używa niestandardowej ikony w przycisku:

@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 w poprzedniej sekcji. Jednak po zaznaczeniu ta implementacja wygląda tak:

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

Kolory niestandardowe

W tym przykładzie pokazujemy, jak za pomocą parametru colors zmienić kolor suwaka i ścieżki, biorąc pod uwagę to, czy suwak 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

Ta implementacja wygląda tak:

Rysunek 5. Przełącznik z niestandardowymi kolorami.

Dodatkowe materiały

• Dokumentacja Material UI