如何在SwiftUI中实现带内部圆点的环形进度条？（适配Widgets accessoryCircular）

要实现苹果锁屏Widget里那种带空隙的圆点进度效果，核心是利用SwiftUI的Circle、trim和strokeStyle来实现，以下是具体的实现方案：

自定义进度View代码 #

struct GappedProgressDotView: View {
    // 进度值，范围0~1
    var progress: Double
    // 空隙对应的弧度（比如0.2弧度≈11.5度）
    var gapAngle: Double = 0.2
    // 进度条宽度
    var lineWidth: CGFloat = 8
    // 进度颜色
    var progressColor: Color = .blue
    // 背景环颜色
    var backgroundColor: Color = .gray.opacity(0.3)
    
    var body: some View {
        ZStack {
            // 背景环形（带空隙）
            Circle()
                .stroke(backgroundColor, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round))
                .trim(from: 0, to: 1 - (gapAngle / (2 * .pi)))
                .rotationEffect(.degrees(90 + (gapAngle * 180 / .pi) / 2))
            
            // 进度环形（跟随进度显示，带空隙）
            Circle()
                .stroke(progressColor, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round))
                .trim(from: 0, to: (1 - (gapAngle / (2 * .pi))) * progress)
                .rotationEffect(.degrees(90 + (gapAngle * 180 / .pi) / 2))
        }
        .frame(width: 80, height: 80)
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        GappedProgressDotView(progress: 0.6)
    }
}

关键逻辑说明 #

• 空隙实现：通过trim裁剪环形，1 - (gapAngle / (2 * .pi))计算出扣除空隙后的有效环形长度（整个圆为2π弧度，减去空隙对应的弧度占比）。
• 圆点效果：设置StrokeStyle的lineCap为.round，让环形的两端自动变成圆形，也就是示例中的圆点样式。
• 空隙位置调整：rotationEffect用来控制空隙的位置，默认将空隙居中在底部；如果需要调整到其他位置，修改旋转角度即可（比如要让空隙在顶部，把旋转角度改为.degrees(-90 - (gapAngle * 180 / .pi) / 2)）。

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