借助 Slider
可组合项,用户可以从一系列选项中进行选择
值。您可以使用滑块来让用户执行以下操作:
- 调整使用一系列值(例如音量和亮度)的设置。
- 过滤图表中的数据,就像设置价格范围时一样。
- 用户输入,例如在评价中设置评分。
滑块包含轨迹、滑块、值标签和刻度线:
- 航迹:航迹是一条水平条,表示 滑块可采用的值。
- 滑块:滑块是滑块上的可拖动控制元素,用于 允许用户在由 。
- 刻度线:刻度线是可选的视觉标记或指示符, 将沿着滑块的轨迹显示
![一个带有拇指、轨迹和刻度线的滑块。](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider.png?authuser=5&hl=nl)
基本实现方法
如需了解完整的 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()) } }
此实现如下所示:
![一个滑块组件,该值会沿着轨迹大约四分之三被选中。](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-basic.png?authuser=5&hl=nl)
高级实现
在实施更复杂的滑块时,您还可以使用 后续参数。
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()) } }
实现如下所示:
![在此处撰写您的替代文本](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-advanced.png?authuser=5&hl=nl)
范围滑块
您还可以使用专用的 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()) } }
![选择了两个值的范围滑块组件。标签用于显示所选内容的上限和下限。](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-range.png?authuser=5&hl=nl)