文章目录
- 1. 概念介绍
- 2. 使用方法
- 3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
- 4. 内容总结
我们在上一章回中介绍了Jetpack多点触控相关的内容，本章回中 主要介绍Slider。闲话休提，让我们一起Talk Android Jetpack吧！
1. 概念介绍
我们在本章回中介绍的Slider就是一个类似进度条的滑动条，与进度条不同的是它不能自动显示进度，需要用户手动拖动滑块才可以显示进度，它常用的场景是调节音量和亮度,这个场景估计大家在手机上都使用过。在Jetpack compose中使用Slider可组合函数表示Slider,本章回中将详细介绍它的使用方法。
2. 使用方法
可组合函数Slider提供了相关参数来控制自己，下面是常用的参数：
- enabled参数：主用来控制是否可以拖动滑动块；
- value参数：主要用来控制滑动时的进度；
- onValueChange参数：滑动值发生变化时调用的函数；
- colors参数：主要用来控制滑动块，滑动轨道的颜色；
- valueRange参数：主要用来控制滑动值的范围，默认值为0-1;
- steps参数：主要用来控制滑动时的步进值，我觉得理解为滑动轨道划分的份数比较合适；
上面介绍的这些参数中我重点对最后一个参数做说明，因为它的用法不好理解，它实际是把valueRange范围内的数据分成了steps+1份，真正的步进值需要用valueRange范围内的值除setps+1才可以。
除此之外，value参数也需要说明：最好给它传入一个状态值，这样才可以实时控制它的进度。我们将会在后面的小节中通过示例代码介绍这些参数的使用方法。
3. 代码与效果
3.1 示例代码
var sliderPosition2 by remember {mutableStateOf(0f)}
Slider(
modifier = Modifier.padding(horizontal = 16.dp),
value = sliderPosition2,
// enabled = false,
//滑动值发生变化时调用
onValueChange = { sliderPosition2 = it },
colors = SliderDefaults.colors(
//滑动条头部的颜色
thumbColor = Color.Red,
//滑动轨道的颜色
activeTrackColor = Color.Green,
inactiveTrackColor = Color.Blue,
//滑动轨道上刻度尺的颜色
activeTickColor = Color.White,
inactiveTickColor = Color.Red,
),
//滑动值的范围，默认0-1，值为浮点类型
valueRange = 1f..10f,
//滑动的步进值,注意需要用range除setps+1才是真正的步进值，比如这里的步进值是10/5=2
//它会在进度显示4个分段标记
steps = 4,
)
Text(text = sliderPosition2.toString())
我们在上面的示例代码中添加了详细的注释，这样有助于大家理解代码，代码中使用了状态值sliderPosition2来控制Slider的进度，代码中还添加了一个Text，它主要用来显示进度值。
结合代码来看一下Slider的步进值:取值范围是1-10，setps值为4，真正的步进值10/5=2。这个步进值是不说滑动一次前进2个进度，而是把整个滑动轨道分成了5部分，它每次步进的内容是按照实际进度值进行的，我们在这里不做详细介绍，遇到具体的需求了再做分析。
3.2 运行效果
编译并且运行上面的示例代码，可以得到以下的运行效果图，建议大家自己动手去实践一下，这样才能体会到滑动时的值的变化。
此外，compose的中Slider与以前View中的Slide在效果上有一个不同点，它会在轨道上显示步进的标记点，类似刻度尺上的刻度，为了方便大家观察，我把它设置成了红色。大家可以仔细看一下。
4. 内容总结
最后，我们对本章回的内容做一个全面的总结：
- 在compose中使用Slider可组合函数实现滑动条；
- Slider通过相关的参数控制滑动的进度和外观颜色；
- Slider需要配合一个状态值使用，这样可以实际控制进度值；
- Slider在外观上会显示步进值，这是与其它Slider不同的地方；
看官们，与Jetpack中Slider相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！
