Jetpack Compose：实现按百分比填充的饼状自定义Shape

你当前的代码仅通过addArc加close()只能得到一段圆弧的闭合区域，并非饼状扇形。要实现从圆心向外延伸的填充效果，需要调整路径的绘制逻辑，让路径从圆心出发，绘制圆弧后再回到圆心，形成完整的扇形区域。

修改后的完整代码如下：

class ProgressPie(val progress: Float) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // 计算圆心坐标
        val centerX = size.width / 2f
        val centerY = size.height / 2f
        // 定义圆弧所在的矩形范围
        val arcRect = Rect(0f, 0f, size.width, size.height)
        
        val path = Path().apply {
            // 移动路径到圆心
            moveTo(centerX, centerY)
            // 添加圆弧：起始角度-90°对应12点钟方向，扫过角度根据进度计算
            addArc(arcRect, -90f, 360f * progress.coerceIn(0f, 1f))
            // 从圆弧终点回到圆心，形成闭合扇形
            lineTo(centerX, centerY)
            // 闭合路径（可选，lineTo已经完成了闭合）
            close()
        }
        return Outline.Generic(path)
    }
}

关键修改说明： #

• moveTo(centerX, centerY)：将路径起点设置为圆心，确保后续绘制的圆弧是从圆心向外延伸的。
• lineTo(centerX, centerY)：绘制完圆弧后，将路径从圆弧终点连回圆心，形成完整的扇形闭合区域。
• coerceIn(0f, 1f)：限制进度值在0到1之间，避免出现异常角度。

使用示例： #

在Composable中通过clip应用这个自定义Shape，就能看到饼状填充效果：

Box(
    modifier = Modifier
        .size(200.dp)
        .clip(ProgressPie(0.6f)) // 60%填充
        .background(Color(0xFF2196F3))
)

内容的提问来源于stack exchange，提问作者David L.