Compose | UI组件(七) | CircularProgressIndicator - 进度条

---

前言

随着移动端的技术不断更新迭代，Compose也运用的越来越广泛，很多人都开始学习Compose

本文主要介绍Compose中 进度条 的含义和基本用法

---

CircularProgressIndicator 是什么？

Compose 自带两种状态进度条，一种是 无限加载的，另一种是 根据值动态显示的

CircularProgressIndicator 是 Compose 中是圆形进度条的进度组件

@Composable
fun CircularProgressIndicator(
    progress: Float,                 //进度值
    modifier: Modifier = Modifier,   //修饰符
    color: Color = ProgressIndicatorDefaults.circularColor,  //进度条颜色
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth //进度条宽度
) 

CircularProgressIndicator 的使用

var progress by remember { mutableStateOf(0.1f) }

val animatedProgress by animateFloatAsState(targetValue = progress,
                                            animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
                                            label = ""
)

Column(modifier = Modifier.border(1.dp,Color.Black).size(150.dp),
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally) {

        CircularProgressIndicator(progress = animatedProgress)

        Spacer(modifier = Modifier.requiredHeight(10.dp))

        OutlinedButton(onClick = {
            if(progress<1f){
                progress +=0.1f
            }
        }) {
            Text(text = "增加进度")
        }

}

注：
animateFloatAsState 用来创建进度条的动画，根据progress值做相应变化

CircularProgressIndicator 圆形进度条指示器

---

总结

1. Compose 自带两种状态进度条，一种是 无限加载的，另一种是 根据值动态显示的
2. CircularProgressIndicator是个圆形进度条