Jetpack Compose实现带渐变圆弧组件：当前效果不符预期求助

你要实现的是一个带有实色到透明渐变的环形加载器，当前代码的核心问题是用了线性渐变，无法匹配环形沿圆弧过渡的需求，导致效果和预期不符。以下是修正后的实现：

问题分析 #

• 原代码使用Brush.linearGradient，渐变方向为直线型，不符合环形沿圆弧渐变的需求
• 未针对环形路径调整渐变起止范围，透明色过渡位置不符合预期

修正后的代码 #

@Composable
fun CircularLoader(
    size: Dp = 40.dp,
    strokeWidth: Dp = 4.dp,
    tintColor: Color = Color(0xFFEF7B7B)
) {
    val stroke = with(LocalDensity.current) {
        Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Round)
    }

    Canvas(
        Modifier
            .progressSemantics()
            .size(size)
            .padding(strokeWidth / 2)
    ) {
        val arcRadius = size.toPx() / 2 - strokeWidth.toPx() / 2
        // 使用扫掠渐变，围绕中心点实现环形的实色到透明过渡
        val sweepBrush = Brush.sweepGradient(
            colors = listOf(tintColor, tintColor.copy(alpha = 0f)),
            startAngle = 0f,
            endAngle = 300f
        )

        drawArc(
            brush = sweepBrush,
            startAngle = 0f,
            sweepAngle = 300f,
            useCenter = false,
            style = stroke,
            topLeft = Offset(strokeWidth.toPx() / 2, strokeWidth.toPx() / 2),
            size = Size(arcRadius * 2, arcRadius * 2)
        )
    }
}

关键修改说明 #

1. 替换渐变类型：用Brush.sweepGradient替代线性渐变，这种渐变围绕中心点旋转，完美适配环形的渐变需求
2. 精准控制渐变范围：通过startAngle和endAngle让渐变正好覆盖绘制的300度圆弧，实色从0度开始，到300度完全透明
3. 修正绘制范围：明确指定drawArc的topLeft和size，确保环形绘制在Canvas中心位置，避免边缘裁切

如果需要添加动态加载动画，可扩展如下：

@Composable
fun AnimatedCircularLoader(
    size: Dp = 40.dp,
    strokeWidth: Dp = 4.dp,
    tintColor: Color = Color(0xFFEF7B7B)
) {
    val stroke = with(LocalDensity.current) {
        Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Round)
    }
    // 添加无限循环的进度动画
    val animatedProgress by animateFloatAsState(
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(1500, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )

    Canvas(
        Modifier
            .progressSemantics(animatedProgress)
            .size(size)
            .padding(strokeWidth / 2)
    ) {
        val arcRadius = size.toPx() / 2 - strokeWidth.toPx() / 2
        val sweepBrush = Brush.sweepGradient(
            colors = listOf(tintColor, tintColor.copy(alpha = 0f)),
            startAngle = 0f,
            endAngle = 300f * animatedProgress
        )

        drawArc(
            brush = sweepBrush,
            startAngle = 0f,
            sweepAngle = 300f * animatedProgress,
            useCenter = false,
            style = stroke,
            topLeft = Offset(strokeWidth.toPx() / 2, strokeWidth.toPx() / 2),
            size = Size(arcRadius * 2, arcRadius * 2)
        )
    }
}

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