Jetpack Compose Slider，CircularProgressIndicator，LinearProgressIndicator的用法

这篇文章会介绍Slider,CircularProgressIndicator以及LinearProgressIndicator的用法

一：Slider

Slider类似传统的Seekbar，我们先来看看代码

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    /*@IntRange(from = 0)*/
    steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SliderColors = SliderDefaults.colors()
) 

• value进度值
• onValueChange 进度改变的监听
• modifier修饰符
• enabled 是否可用
• valueRange 进度值的范围 默认是0到1
• steps 将进度条平分成（steps+1）段，比如分成2段。如果我们进度条在第一段之间拉，超过第一段的一半就自动到第一段，没超过一半就回退到开始位置。
• onValueChangeFinished 进度改变完成的监听
• interactionSource 可以处理状态的，比如按下的时候什么效果，正常时候什么效果。类似之前再布局文件里写Selector。 比如我们下面的例子中设置，如果是选中时候边框线的颜色是绿色，没有选中时候是黑色。 interactionSource.collectIsPressedAsState() 判断是否按下状态interactionSource.collectIsFocusedAsState() 判断是否获取焦点的状态interactionSource.collectIsDraggedAsState() 判断是否拖动
  我们讲Button的时候讲个该属性Button的讲解
• colors 设置各种颜色 默认实现是SliderDefaults.colors。我们来具体看看代码

  @Composable
  fun colors(
        thumbColor: Color = MaterialTheme.colors.primary,
        disabledThumbColor: Color = MaterialTheme.colors.onSurface
            .copy(alpha = ContentAlpha.disabled)
            .compositeOver(MaterialTheme.colors.surface),
        activeTrackColor: Color = MaterialTheme.colors.primary,
        inactiveTrackColor: Color = activeTrackColor.copy(alpha = InactiveTrackAlpha),
        disabledActiveTrackColor: Color =
            MaterialTheme.colors.onSurface.copy(alpha = DisabledActiveTrackAlpha),
        disabledInactiveTrackColor: Color =
            disabledActiveTrackColor.copy(alpha = DisabledInactiveTrackAlpha),
        activeTickColor: Color = contentColorFor(activeTrackColor).copy(alpha = TickAlpha),
        inactiveTickColor: Color = activeTrackColor.copy(alpha = TickAlpha),
        disabledActiveTickColor: Color = activeTickColor.copy(alpha = DisabledTickAlpha),
        disabledInactiveTickColor: Color = disabledInactiveTrackColor
            .copy(alpha = DisabledTickAlpha)
  )
  

  • thumbColor 进度条那个小圆形的颜色
  • disabledThumbColor 不可用时候的小圆形的颜色
  • activeTrackColor 进度条的进度颜色
  • inactiveTrackColor 进度条的底色
  • disabledActiveTrackColor 不可用时候的进度条的颜色
  • disabledInactiveTrackColor 不可用时候的进度条的底色
  • activeTickColor 断点处的圆点的进度的颜色，比如我们steps比如设置成2，这时候进度条是被平分成3段。在平分断点处，会有三个小圆点。activeTickColor就表示该小圆点的进度的颜色。
  • inactiveTickColor 断点处的圆点的的底色，比如我们steps比如设置成2，这时候进度条是被平分成3段。在平分断点处，会有三个小圆点。inactiveTickColor就表示该小圆点的底色。
  • disabledActiveTickColor 不可用时候的平分处的小圆点的进度颜色
  • disabledInactiveTickColor 不可用时候的平分处的小圆点的底色 举例：

@Preview()
@Composable
fun sliderTest(){
    val valueState = remember {
        mutableStateOf(1.0f)
    }
    val interationSource = remember {
        MutableInteractionSource()
    }
    val pressState = interationSource.collectIsPressedAsState()
    Slider(
        value = valueState.value,
        onValueChange = {
            valueState.value = it
        },
        modifier = Modifier.fillMaxWidth(),
        enabled = true,
        valueRange = 0f..1f,
        steps = 2,
        onValueChangeFinished = {
            Log.e("ccm","==Change Finish=")
        },
        interactionSource = interationSource,
        colors = SliderDefaults.colors(thumbColor = if(pressState.value) Color.Green else Color.Red
            ,activeTrackColor = Color.Green
            ,inactiveTrackColor = Color.Yellow,
            activeTickColor = Color.Blue,inactiveTickColor = Color.Black)
    )
}

二：CircularProgressIndicator

CircularProgressIndicator 圆形进度，loading

@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
){...}

• modifier 修饰符
• color 进度的颜色
• strokeWidth 进度的stroke的宽度 举例：

@Preview()
@Composable
fun circularProgressIndicatorTest(){
    CircularProgressIndicator(
        modifier = Modifier.size(50.dp),
        color = Color.Red,
        strokeWidth = 1.dp
    )
}

三：LinearProgressIndicator

线型进度，类似我们浏览器加载网页时候，那条进度条

@Composable
fun LinearProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity)
){...}

• modifier 修饰符
• color 进度颜色
• backgroundColor 背景颜色 举例：

@Preview()
@Composable
fun linearProgressIndicatorTest(){
    LinearProgressIndicator(
        modifier = Modifier.fillMaxWidth().height(2.dp),
        color = Color.Red,
        backgroundColor = Color.Green
    )
}