滑块

Slider 可组合项可让用户从一系列值中进行选择。您可以使用滑块让用户执行以下操作：

• 调整使用一系列值的设置，例如音量和亮度。
• 过滤图表中的数据，例如设置价格范围。
• 用户输入，例如在评价中设置评分。

滑块包含滑轨、滑块、值标签和刻度线：

• 滑轨：滑轨是表示滑块可取值范围的水平条。
• 滑块：滑块是滑块条上可拖动的控件元素，可让用户在滑轨定义的范围内选择特定值。
• 刻度线：刻度线是可选的视觉标记或指示器，会沿滑块的滑轨显示。

图 1. 滑块的实现。

基本实现方法

如需查看完整的 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

此实现如下所示：

图 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. 具有步长和设定值范围的滑块。

注意： 滑块的最开始和最末尾也算作“步长”。在前面的示例中，范围为 0f..50f，steps 的数量为 3，范围内的每个间隔为 12.5，因为滑块的开头和结尾也是用户可以选择的间隔。

注意： 您还可以向 Slider 传递 thumb 和 track 可组合项，以更全面地自定义组件的外观。

范围滑块

您还可以使用专用的 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. 范围滑块的实现。

其他资源

• Material UI 文档