借助 Slider
可组合项,用户可以从一系列值中进行选择。您可以使用滑块来让用户执行以下操作:
- 调整使用一系列值(例如音量和亮度)的设置。
- 过滤图表中的数据,例如设置价格范围。
- 用户输入,例如在评价中设置评分。
该滑块包含滑道、滑块、值标签和刻度线:
- 轨迹:轨迹是水平条,表示滑块可以采用的值范围。
- Thumb:滑块是滑块上的可拖动控制元素,可让用户选择轨道定义的范围内的特定值。
- 刻度线:刻度线是沿滑块轨迹显示的可选视觉标记或指示器。
基本实现方法
如需了解完整的 API 定义,请参阅 Slider
参考文档。Slider
可组合项的一些关键参数如下:
value
:滑块的当前值。onValueChange
:每当值发生更改时都会调用的 lambda。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()) } }
此实现如下所示:
高级实现
实现更复杂的滑块时,您还可以利用以下参数。
colors
:用于控制滑块颜色的SliderColors
实例。valueRange
:滑块可采用的值的范围。steps
:滑块上拇指扣合的凹槽数量。
以下代码段会实现一个包含 3 个步骤的滑块,范围为 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()) } }
实现如下所示:
范围滑块
您还可以使用专用的 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()) } }