Funkcja kompozycyjna Slider
umożliwia użytkownikom wybranie zakresu
. Możesz użyć suwaka, aby pozwolić użytkownikowi na:
- Dostosuj ustawienia używające zakresu wartości, takich jak głośność i jasność.
- Filtrowanie danych na wykresie, podobnie jak przy ustalaniu przedziału cenowego.
- Dane wejściowe użytkownika, np. ocena w opinii.
Suwak zawiera ścieżkę dźwiękową, ikonę kciuka, etykietę wartości i znaczniki:
- Ścieżka: poziomy pasek reprezentujący zakres dostępne przez suwak.
- Kciuk: kciuk to możliwy do przeciągania element sterujący na suwaku, który pozwala użytkownikowi wybrać konkretną wartość z zakresu zdefiniowanego przez śledzić.
- Znaczniki: to opcjonalne znaczniki wizualne lub wskaźniki, które są wyświetlane na ścieżce suwaka.
![Suwak ze znacznikami kciuka, ścieżki i znaczników.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider.png?authuser=8&hl=pl)
Implementacja podstawowa
Pełną definicję interfejsu API znajdziesz w dokumentacji Slider
. Niektóre ważne
dla funkcji kompozycyjnej Slider
są te parametry:
value
– bieżąca wartość suwaka.onValueChange
: funkcja lambda, która jest wywoływana za każdym razem, gdy wartość jest została zmieniona.enabled
: wartość logiczna wskazująca, czy użytkownik może wchodzić w interakcję z: użyj suwaka.
Poniższy przykład to prosty suwak. Dzięki temu użytkownik może
wybierz wartość od 0.0
do 1.0
. Użytkownik może wybrać dowolną wartość w argumencie
ten zakres, suwak jest ciągły.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
Implementacja wygląda tak:
![Komponent suwaka z wartością wybraną w około trzech czwartych wzdłuż ścieżki.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-basic.png?authuser=8&hl=pl)
Implementacja zaawansowana
Przy bardziej złożonym suwaku możesz dodatkowo użyć funkcji tych parametrów.
colors
: wystąpienieSliderColors
, które umożliwia kontrolowanie kolorów suwaka.valueRange
: zakres wartości, które może przyjmować suwak.steps
: liczba otworów na suwaku, do których kciuk jest przyciągany.
W poniższym fragmencie znajduje się suwak, który składa się z 3 etapów i zakresu
od 0.0
do 50.0
. Kciuk jest przyciągany do każdego kroku, więc suwak jest
dyskretny.
@Preview @Composable fun SliderAdvancedExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it }, colors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.secondary, activeTrackColor = MaterialTheme.colorScheme.secondary, inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, ), steps = 3, valueRange = 0f..50f ) Text(text = sliderPosition.toString()) } }
Implementacja wygląda tak:
![Wpisz tutaj swój tekst alternatywny](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-advanced.png?authuser=8&hl=pl)
Suwak zakresu
Możesz też użyć dedykowanej funkcji kompozycyjnej RangeSlider
. Dzięki temu użytkownik może:
Wybierz 2 wartości. Może to być przydatne, jeśli na przykład użytkownik chce
określ cenę minimalną i maksymalną.
Poniższy przykład jest stosunkowo prostym przykładem stałego suwakiem zakresu.
@Preview @Composable fun RangeSliderExample() { var sliderPosition by remember { mutableStateOf(0f..100f) } Column { RangeSlider( value = sliderPosition, steps = 5, onValueChange = { range -> sliderPosition = range }, valueRange = 0f..100f, onValueChangeFinished = { // launch some business logic update with the state you hold // viewModel.updateSelectedSliderValue(sliderPosition) }, ) Text(text = sliderPosition.toString()) } }
![Komponent suwaka zakresu z zaznaczonymi 2 wartościami. Etykieta wskazuje górną i dolną granicę zaznaczenia.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-range.png?authuser=8&hl=pl)