Jetpack：026-Jetpack中的Slider

最新推荐文章于 2024-07-18 11:07:23 发布

talk_8

最新推荐文章于 2024-07-18 11:07:23 发布

阅读量445

点赞数 5

分类专栏：一起Talk AndroidJetPack吧文章标签： android Jetpack compose slider 滑动条

本文链接：https://blog.csdn.net/talk_8/article/details/134173714

版权

一起Talk AndroidJetPack吧专栏收录该内容

30 篇文章 1 订阅

订阅专栏

文章目录

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