Составной Slider
позволяет пользователям делать выбор из диапазона значений. Вы можете использовать ползунок, чтобы позволить пользователю делать следующее:
- Настройте параметры, использующие диапазон значений, таких как громкость и яркость.
- Фильтруйте данные на графике, как при настройке ценового диапазона.
- Пользовательский ввод, например установка оценки в обзоре.
Ползунок содержит дорожку, ползунок, метку значения и деления:
- Трек : трек представляет собой горизонтальную полосу, которая представляет диапазон значений, которые может принимать ползунок.
- Большой палец : Большой палец — это перетаскиваемый элемент управления на ползунке, который позволяет пользователю выбирать определенное значение в диапазоне, определенном дорожкой.
- Делительные отметки : деления — это дополнительные визуальные маркеры или индикаторы, которые появляются вдоль дорожки ползунка.
![Ползунок с большим пальцем, дорожкой и делениями.](https://developer.android.com/static/develop/ui/compose/images/components/slider.png?authuser=9&hl=ru)
Базовая реализация
Полное определение API см. в справочнике Slider
. Некоторые из ключевых параметров компонуемого Slider
:
-
value
: Текущее значение ползунка. -
onValueChange
: лямбда, которая вызывается каждый раз, когда значение изменяется. -
enabled
: логическое значение, указывающее, может ли пользователь взаимодействовать с ползунком.
Следующий пример представляет собой простой слайдер. Это позволяет пользователю выбрать значение от 0.0
до 1.0
. Поскольку пользователь может выбрать любое значение в этом диапазоне, ползунок является непрерывным .
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
Эта реализация выглядит следующим образом:
![Компонент ползунка со значением, выбранным примерно на три четверти вдоль дорожки.](https://developer.android.com/static/develop/ui/compose/images/components/slider-basic.png?authuser=9&hl=ru)
Расширенная реализация
При реализации более сложного слайдера вы можете дополнительно использовать следующие параметры.
-
colors
: экземплярSliderColors
, который позволяет вам управлять цветами ползунка. -
valueRange
: диапазон значений, которые может принимать ползунок. -
steps
: количество выемок на ползунке, к которым привязывается большой палец.
В следующем фрагменте кода реализован ползунок с тремя шагами в диапазоне от 0.0
до 50.0
. Поскольку большой палец привязывается к каждому шагу, этот ползунок является дискретным .
@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()) } }
Реализация выглядит следующим образом:
![Напишите здесь свой альтернативный текст](https://developer.android.com/static/develop/ui/compose/images/components/slider-advanced.png?authuser=9&hl=ru)
Ползунок диапазона
Вы также можете использовать специальный составной элемент RangeSlider
. Это позволяет пользователю выбрать два значения. Это может быть полезно, например, когда пользователь желает выбрать минимальную и максимальную цену.
Следующий пример представляет собой относительно простой пример ползунка непрерывного диапазона.
@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()) } }
![Компонент ползунка диапазона с выбранными двумя значениями. Метка отображает верхнюю и нижнюю границы выделения.](https://developer.android.com/static/develop/ui/compose/images/components/slider-range.png?authuser=9&hl=ru)