Android Jetpack Compose实现带图标的圆角方形进度指示器

要实现你需要的带图标的圆角方形进度指示器，可以通过自定义Canvas绘制进度边框，结合Box组件实现层级叠加，以下是具体实现方案：

1. 自定义圆角方形进度指示器 #

直接用Canvas绘制圆角矩形的进度边框，替代默认的圆形进度组件：

@Composable
fun SquareProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    strokeWidth: Dp = 4.dp,
    color: Color = Color.Blue,
    cornerRadius: Dp = 8.dp
) {
    val strokeWidthPx = strokeWidth.toPx()
    val cornerRadiusPx = cornerRadius.toPx()
    Canvas(modifier = modifier) {
        // 计算绘制区域，留出描边宽度的空间
        val size = size.minDimension - strokeWidthPx
        val topLeft = Offset(strokeWidthPx / 2, strokeWidthPx / 2)
        val rect = Rect(topLeft, topLeft + Offset(size, size))
        val roundedRect = RoundedRect(rect, cornerRadiusPx, cornerRadiusPx)
        
        // 从顶部开始顺时针绘制进度弧
        drawArc(
            color = color,
            startAngle = 270f,
            sweepAngle = progress.coerceIn(0f, 1f) * 360f,
            useCenter = false,
            topLeft = roundedRect.topLeft,
            size = roundedRect.size,
            style = Stroke(width = strokeWidthPx, cap = StrokeCap.Round)
        )
    }
}

2. 组合图标与进度指示器 #

用Box组件将图标和进度指示器叠加，同时处理完成状态的UI切换：

@Composable
fun IconWithSquareProgress(
    icon: ImageVector,
    progress: Float,
    isCompleted: Boolean,
    modifier: Modifier = Modifier,
    iconSize: Dp = 24.dp,
    progressSize: Dp = 40.dp,
    progressColor: Color = Color.Blue,
    completedIconColor: Color = Color.Green,
    defaultIconColor: Color = Color.Gray
) {
    Box(
        modifier = modifier.size(progressSize),
        contentAlignment = Alignment.Center
    ) {
        // 底层图标，完成时切换颜色
        Icon(
            imageVector = icon,
            contentDescription = null,
            modifier = Modifier.size(iconSize),
            tint = if (isCompleted) completedIconColor else defaultIconColor
        )
        
        // 未完成时显示进度边框
        if (!isCompleted) {
            SquareProgressIndicator(
                progress = progress,
                modifier = Modifier.matchParentSize(),
                strokeWidth = 3.dp,
                color = progressColor,
                cornerRadius = 8.dp
            )
        }
    }
}

3. 使用示例 #

通过状态变量控制进度和完成状态：

@Composable
fun UsageDemo() {
    val progress by remember { mutableStateOf(0.7f) }
    val isCompleted by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        IconWithSquareProgress(
            icon = Icons.Filled.Check,
            progress = progress,
            isCompleted = isCompleted
        )

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = {
            isCompleted = !isCompleted
            if (!isCompleted) {
                // 重置进度（可选）
                // progress = 0f
            }
        }) {
            Text(text = if (isCompleted) "重置状态" else "标记完成")
        }
    }
}

关键说明 #

• 圆角进度实现：利用drawArc结合RoundedRect，将进度值转换为扫过的角度，模拟圆角方形的边框进度动画；
• 层级叠加：Box组件中先绘制图标，再绘制进度指示器，确保进度层在图标上方；
• 状态切换：完成时隐藏进度边框，同时修改图标颜色，实现需求的UI变化。

内容的提问来源于stack exchange，提问作者rlaj