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