Jetpack：026-Jetpack中的Slider

我们在上一章回中介绍了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相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！