Слайдер

Составной Slider позволяет пользователям делать выбор из диапазона значений. Вы можете использовать ползунок, чтобы позволить пользователю делать следующее:

  • Настройте параметры, использующие диапазон значений, таких как громкость и яркость.
  • Фильтруйте данные на графике, как при настройке ценового диапазона.
  • Пользовательский ввод, например установка оценки в обзоре.

Ползунок содержит дорожку, ползунок, метку значения и деления:

  • Трек : трек представляет собой горизонтальную полосу, которая представляет диапазон значений, которые может принимать ползунок.
  • Большой палец : Большой палец — это перетаскиваемый элемент управления на ползунке, который позволяет пользователю выбирать определенное значение в диапазоне, определенном дорожкой.
  • Делительные отметки : деления — это дополнительные визуальные маркеры или индикаторы, которые появляются вдоль дорожки ползунка.
Ползунок с большим пальцем, дорожкой и делениями.
Рисунок 1. Реализация слайдера.

Базовая реализация

Полное определение 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())
    }
}
Slider.kt

Эта реализация выглядит следующим образом:

Компонент ползунка со значением, выбранным примерно на три четверти вдоль дорожки.
Рисунок 2. Базовая реализация слайдера.

Расширенная реализация

При реализации более сложного слайдера вы можете дополнительно использовать следующие параметры.

  • 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())
    }
}
Slider.kt

Реализация выглядит следующим образом:

Напишите здесь свой альтернативный текст
Рисунок 3. Ползунок с шагами и диапазоном заданных значений.

Ползунок диапазона

Вы также можете использовать специальный составной элемент 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())
    }
}
Slider.kt

Компонент ползунка диапазона с выбранными двумя значениями. Метка отображает верхнюю и нижнюю границы выделения.
Рисунок 4. Реализация ползунка диапазона.

Дополнительные ресурсы