如何在Jetpack Compose中使用Canvas创建带标签的圆弧

核心实现思路 #

在Jetpack Compose里用Canvas组件配合drawArc方法就能轻松实现这类圆弧效果。如果是类似示例图的多层圆弧（背景弧+前景进度弧），只需要叠加绘制即可，核心是精准控制圆弧的角度、尺寸和画笔样式。

完整代码示例 #

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp

@Composable
fun ArcProgress() {
    Canvas(modifier = Modifier.size(200.dp)) {
        // 定义圆弧所在的矩形区域，让圆弧居中显示
        val arcRectSize = Size(size.width * 0.8f, size.height * 0.8f)
        val arcTopLeft = Offset(
            x = (size.width - arcRectSize.width) / 2,
            y = (size.height - arcRectSize.height) / 2
        )
        
        // 1. 绘制背景灰色圆弧
        drawArc(
            color = Color.LightGray,
            startAngle = 135f, // 起始角度（0度对应3点钟方向，顺时针递增）
            sweepAngle = 270f, // 圆弧扫过的总角度
            useCenter = false, // 仅绘制圆弧，不连接圆心形成扇形
            topLeft = arcTopLeft,
            size = arcRectSize,
            style = Stroke(
                width = 20.dp.toPx(), // 圆弧线条宽度
                cap = StrokeCap.Round // 圆弧两端设置圆角
            )
        )
        
        // 2. 绘制前景进度圆弧
        drawArc(
            color = Color(0xFF2196F3),
            startAngle = 135f,
            sweepAngle = 180f, // 可根据进度动态调整，比如进度50%就是270*0.5=135f
            useCenter = false,
            topLeft = arcTopLeft,
            size = arcRectSize,
            style = Stroke(
                width = 20.dp.toPx(),
                cap = StrokeCap.Round
            )
        )
    }
}

关键参数说明 #

• startAngle：圆弧的起始角度，Jetpack Compose中0度对应3点钟方向，顺时针为角度增加方向，示例中135度对应10点半位置。
• sweepAngle：圆弧扫过的角度，背景弧设置270度就能形成示例图的大弧形范围。
• useCenter：设为false仅绘制圆弧边缘，设为true会把圆弧两端和圆心连接成闭合扇形。
• Stroke样式：width控制圆弧粗细，StrokeCap.Round让圆弧两端呈现圆角，匹配示例图的视觉风格。

动态进度扩展 #

如果需要实现随进度变化的圆弧，只需把进度参数传入，动态计算扫过角度：

@Composable
fun ArcProgress(progress: Float) {
    val validProgress = progress.coerceIn(0f, 1f) // 限制进度在0-1范围内
    val sweepAngle = 270f * validProgress
    // 其余代码与上述示例一致，替换前景弧的sweepAngle为该值即可
}

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