Jetpack Compose Slider,CircularProgressIndicator,LinearProgressIndicator的用法

Jetpack Compose Slider,CircularProgressIndicator,LinearProgressIndicator的用法

Android小彩虹2021-07-16 6:00:5560A+A-

这篇文章会介绍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
    )
}

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们