Komponent Switch
umożliwia użytkownikom przełączanie się między 2 stanami: zaznaczonemu lub odznaczonemu. 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ę.
Komponent składa się z 2 części: kciuka i ścieżki dźwiękowej. Kciuk to element przełącznika, 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ż dotknąć przełącznika, aby go sprawdzić i wyczyścić.
Implementacja podstawowa
Pełną definicję interfejsu API znajdziesz w dokumentacji Switch
. Oto niektóre kluczowe parametry, których możesz potrzebować:
checked
: początkowy stan przełączenia.onCheckedChange
: wywołanie zwrotne, które jest wywoływane po zmianie stanu przełącznika.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:
Oto wygląd opcji po zaznaczeniu:
Implementacja zaawansowana
Przy wdrażaniu bardziej zaawansowanego przełącznika możesz użyć tych podstawowych parametrów:
thumbContent
: umożliwia dostosowanie wyglądu kciuka po zaznaczeniu.colors
: umożliwia dostosowanie koloru ścieżki i miniatury.
Niestandardowa kciuk
Aby utworzyć niestandardową miniaturę, możesz przekazać dowolną funkcję kompozycyjną dla parametru thumbContent
. 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 } ) }
W tej implementacji wygląd niezaznaczonego elementu wygląda tak samo jak w przykładzie w poprzedniej sekcji. Po zaznaczeniu tej opcji implementacja będzie jednak wyglądać tak:
Kolory niestandardowe
Z przykładu poniżej dowiesz się, jak wykorzystać parametr color [kolory] do zmiany koloru kciuka i ścieżki przełącznika, z uwzględnieniem tego, czy ten 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, ) ) }
Implementacja wygląda tak: