借助 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())
}
}
