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ć.
![Przykłady komponentu Przełącznik w trybie jasnym i ciemnym.](https://developer.android.com/static/develop/ui/compose/images/components/switches.png?authuser=0000&hl=pl)
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 } ) }
Gdy nie zaznaczysz tego pola, implementacja wygląda tak:
![Podstawowy przełącznik, który nie jest zaznaczony.](https://developer.android.com/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=0000&hl=pl)
Oto wygląd opcji po zaznaczeniu:
![Podstawowy przełącznik z zaznaczonym ustawieniem.](https://developer.android.com/static/develop/ui/compose/images/components/switch.png?authuser=0000&hl=pl)
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 } ) }
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:
![Przełącznik, który po zaznaczeniu parametru thumbContent wyświetla ikonę niestandardową.](https://developer.android.com/static/develop/ui/compose/images/components/switch-icon.png?authuser=0000&hl=pl)
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, ) ) }
Implementacja wygląda tak:
![Przełącznik, który korzysta z parametru color [kolor] do wyświetlania przełącznika z niestandardowymi kolorami zarówno dla przycisku kciuka, jak i wskaźnika.](https://developer.android.com/static/develop/ui/compose/images/components/switch-colors.png?authuser=0000&hl=pl)