如何在Jetpack Compose中为drawLine绘制的进度条添加自定义圆角？

原来的drawLine通过StrokeCap.Round实现的圆角是固定为线宽的一半，无法自定义圆角大小。要实现自定义圆角，推荐改用drawRoundRect来绘制背景和进度条，这种方式能完全控制圆角半径：

代码实现步骤 #

1. 绘制背景圆角矩形 #

替换原来的drawLine，用drawRoundRect绘制带自定义圆角的背景：

drawRoundRect(
    color = backgroundIndicatorColor,
    size = size,
    cornerRadius = CornerRadius(x = 16.dp.toPx(), y = 16.dp.toPx()) // 替换为你需要的圆角尺寸
)

2. 绘制渐变进度条 #

先创建渐变画笔，再根据进度绘制带圆角的进度区域：

// 创建水平渐变画笔
val gradientBrush = Brush.horizontalGradient(
    colors = listOf(Color(0xFF667EEA), Color(0xFF764BA2))
)

// 计算进度宽度
val progressWidth = size.width * progress // progress为0f-1f的进度值

// 绘制进度，根据进度是否满值调整右侧圆角
drawRoundRect(
    brush = gradientBrush,
    size = Size(width = progressWidth, height = size.height),
    cornerRadius = if (progress >= 1f) {
        CornerRadius(x = 16.dp.toPx(), y = 16.dp.toPx()) // 满进度时两端均为圆角
    } else {
        CornerRadius(x = 16.dp.toPx(), y = 16.dp.toPx()).copy(right = 0f) // 未满时右侧为直角
    }
)

完整Composable示例 #

@Composable
fun CustomRoundProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Gray.copy(alpha = 0.3f),
    gradientColors: List<Color> = listOf(Color(0xFF667EEA), Color(0xFF764BA2)),
    cornerRadius: Dp = 16.dp
) {
    val cornerRadiusPx = cornerRadius.toPx()
    val gradientBrush = Brush.horizontalGradient(colors = gradientColors)

    Canvas(modifier = modifier) {
        // 绘制背景
        drawRoundRect(
            color = backgroundColor,
            size = size,
            cornerRadius = CornerRadius(cornerRadiusPx, cornerRadiusPx)
        )

        // 绘制进度
        val progressWidth = size.width * progress.coerceIn(0f, 1f)
        drawRoundRect(
            brush = gradientBrush,
            size = Size(progressWidth, size.height),
            cornerRadius = if (progress >= 1f) {
                CornerRadius(cornerRadiusPx, cornerRadiusPx)
            } else {
                CornerRadius(cornerRadiusPx, cornerRadiusPx).copy(right = 0f)
            }
        )
    }
}

如果需要进度未填满时两端仍保持圆角，直接去掉if判断，使用统一的cornerRadius即可，可根据实际UI需求调整。

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