Przełącz

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

• włączanie i wyłączanie ustawienia;
• włączanie i wyłączanie funkcji;
• wybieranie opcji.

Komponent składa się z 2 części: suwaka i ścieżki. Suwak to część przełącznika, którą 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. Może też dotknąć przełącznika, aby go zaznaczyć lub odznaczyć.

Implementacja podstawowa

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

• checked: początkowy stan 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żywane w przełączniku.

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 przełącznik jest odznaczony, ta implementacja wygląda tak:

Gdy przełącznik jest zaznaczony, wygląda tak:

Implementacja zaawansowana

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

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

Suwak niestandardowy

Aby utworzyć suwak niestandardowy, możesz przekazać dowolny komponent do parametru thumbContent. Oto przykład przełącznika, który używa ikony niestandardowej jako 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 odznaczonego przełącznika jest taki sam jak w przykładzie w poprzedniej sekcji. Gdy przełącznik jest zaznaczony, ta implementacja wygląda tak:

Spersonalizowane kolory

Z przykładu poniżej dowiesz się, jak używać parametru colors, aby zmienić kolor suwaka i ścieżki przełącznika, biorąc pod uwagę, 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

Ta implementacja wygląda tak:

Dodatkowe materiały

• Dokumentacja interfejsu użytkownika Material Design