前言
随着移动端的技术不断更新迭代,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 圆形进度条指示器
总结
- Compose 自带两种状态进度条,一种是 无限加载的,另一种是 根据值动态显示的
- CircularProgressIndicator是个圆形进度条