如何让Jetpack Compose CircularProgressIndicator逆时针显示进度？

方法一：进度值反转 + 组件旋转修正 #

系统默认的CircularProgressIndicator仅支持顺时针填充，可通过反转进度值+旋转组件模拟逆时针效果：

// countdownProgress为倒计时进度，范围1f(满)~0f(空)
CircularProgressIndicator(
    progress = 1f - countdownProgress,
    modifier = Modifier.graphicsLayer(rotationZ = 180f)
)

原理：

1. 将倒计时的countdownProgress反转成1f - countdownProgress，把「剩余比例」转为系统组件需要的「已填充比例」
2. 旋转组件180°后，原本的顺时针填充视觉上变为从顶部开始的逆时针填充，完全匹配倒计时的反向计数逻辑

方法二：自定义Canvas绘制（更灵活可控） #

如果需要完全自定义进度的起始位置、方向和样式，直接用Canvas绘制是最可靠的方案：

@Composable
fun ReverseCircularProgressIndicator(
    progress: Float, // 1f=满进度，0f=空进度
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colorScheme.primary,
    strokeWidth: Dp = 4.dp
) {
    val strokeWidthPx = strokeWidth.toPx()
    Canvas(modifier = modifier) {
        val canvasSize = size.minDimension - strokeWidthPx
        val center = Offset(
            x = size.width / 2,
            y = size.height / 2
        )
        val radius = canvasSize / 2

        // 绘制背景圆环
        drawCircle(
            color = color.copy(alpha = 0.3f),
            radius = radius,
            center = center,
            style = Stroke(width = strokeWidthPx)
        )

        // 绘制逆时针进度圆环：sweepAngle为负数表示逆时针方向
        drawArc(
            color = color,
            startAngle = -90f, // 起始角度为顶部（0°为右侧，-90°对应顶部）
            sweepAngle = -progress * 360f,
            useCenter = false,
            topLeft = Offset(center.x - radius, center.y - radius),
            size = Size(canvasSize, canvasSize),
            style = Stroke(width = strokeWidthPx, cap = StrokeCap.Round)
        )
    }
}

使用示例：

// 传入倒计时进度即可
ReverseCircularProgressIndicator(progress = countdownProgress)

关于scaleX=-1f无效的说明 #

你尝试的Modifier.graphicsLayer(scaleX = -1f)或Modifier.scale(x=-1f)之所以没效果，是因为CircularProgressIndicator是对称组件，X轴镜像后视觉上和原组件无差异，无法改变填充方向的逻辑。上面两种方法才是针对需求的有效解决方案。

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