当前位置：首页 > news >正文

Compose笔记(十五)--进度条

news 来源：原创 2025/9/10 14:27:12

这一节了解一下Compose中的进度条，有两种类型的进度条可供使用，分别是线性进度条（LinearProgressIndicator）和圆形进度条（CircularProgressIndicator），每种进度条又可分为确定模式和不确定模式。

1. 不确定模式
在不确定模式下，进度条会持续滚动，用于表示操作正在进行，但无法确定具体的完成进度。
2. 确定模式
在确定模式下，需要传入 progress 参数，该参数的值范围是 0 到 1，表示操作的完成进度。

栗子:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@Composable
fun ProgressBarsExample() {Column(modifier = Modifier.padding(top = 40.dp),verticalArrangement = Arrangement.spacedBy(16.dp)) {// 不确定线性进度条IndeterminateLinearProgressBar()// 确定线性进度条DeterminateLinearProgressBar()// 不确定圆形进度条IndeterminateCircularProgressBar()// 确定圆形进度条DeterminateCircularProgressBar()// 自定义进度条样式CircularProgressBarExample()}
}@Composable
fun IndeterminateLinearProgressBar() {LinearProgressIndicator()
}@Composable
fun DeterminateLinearProgressBar() {var progress by remember {  mutableStateOf(0.5f)}LinearProgressIndicator(progress = progress)
}@Composable
fun IndeterminateCircularProgressBar() {CircularProgressIndicator()
}@Composable
fun DeterminateCircularProgressBar() {var progress by remember { mutableStateOf(0.7f)}CircularProgressIndicator(progress = progress)
}

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp@Composable
fun CircularProgressBarExample() {var progress by remember {  mutableStateOf(0.2f) }Column(modifier = Modifier.size(400.dp).padding(top = 20.dp),horizontalAlignment = Alignment.CenterHorizontally) {CircularProgressBar(progress = progress,modifier = Modifier.size(150.dp),indicatorStrokeWidth = 4.dp,backgroundCircleColor = if(progress in 0.0..0.2) Color.Yellowelse if(progress>0.2 && progress<=0.5)Color.Redelse if(progress>0.5 && progress<0.8)Color.Blueelse Color.White,fontSize = 12.sp)Button(modifier = Modifier.padding(top = 20.dp),onClick = {progress = if (progress < 1f) progress + 0.1f else 0f}) {Text(text = "进度测试")}}
}

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp@Composable
fun CircularProgressBar(progress: Float,modifier: Modifier = Modifier,backgroundIndicatorColor: Color = Color.LightGray,indicatorColor: Color = Color.Blue,indicatorStrokeWidth: Dp = 10.dp,backgroundCircleColor: Color = Color.White,textColor: Color = Color.Black,fontSize: TextUnit = 20.sp
) {Box(modifier = modifier,contentAlignment = Alignment.Center) {Canvas(modifier = modifier) {drawBackgroundCircle(backgroundCircleColor)drawBackgroundIndicator(backgroundIndicatorColor, indicatorStrokeWidth)drawProgressIndicator(progress, indicatorColor, indicatorStrokeWidth)}Text(text = "${(progress * 100).toInt()}%",color = textColor,fontSize = fontSize,fontWeight = FontWeight.Bold)}
}private fun DrawScope.drawBackgroundCircle(color: Color) {drawCircle(color = color,radius = size.minDimension / 2)
}private fun DrawScope.drawBackgroundIndicator(color: Color,strokeWidth: Dp
) {drawArc(color = color,startAngle = -90f,sweepAngle = 360f,useCenter = false,style = Stroke(width = strokeWidth.toPx(),cap = StrokeCap.Round),size = Size(size.width, size.height))
}private fun DrawScope.drawProgressIndicator(progress: Float,color: Color,strokeWidth: Dp
) {drawArc(color = color,startAngle = -90f,sweepAngle = 360f * progress,useCenter = false,style = Stroke(width = strokeWidth.toPx(),cap = StrokeCap.Round),size = Size(size.width, size.height))
}

如图:

相关文章：