滑块

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

此实现如下所示：

高级实现

在实施更复杂的滑块时，您还可以使用 后续参数。

• 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

实现如下所示：

范围滑块

您还可以使用专用的 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

其他资源

• Material 界面文档