Slider 可组合项可让用户从一系列值中进行选择。您可以使用滑块来让用户执行以下操作：
- 调整使用一系列值（例如音量和亮度）的设置。
- 过滤图表中的数据，就像设置价格范围时一样。
- 用户输入，例如在评价中设置评分。
滑块包含轨迹、滑块、值标签和刻度线：
- 轨迹：轨迹是一条水平条，表示滑块可以采用的值范围。
- 滑块：滑块是滑块上的可拖动控制元素，可让用户在轨迹定义的范围内选择特定值。
- 刻度线：刻度线是沿着滑块的轨迹显示的可选视觉标记或指示符。
基本实现方法
如需了解完整的 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：滑块上让拇指卡入的槽位数量。
以下代码段会实现一个包含三个步骤的滑块，范围为 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())
}
}
