SwiftUI-画圆形可控制进度

SwiftUI

字数统计: 298阅读时长: 1 min

 2023/06/26   Share

SwiftUI 健康圆环并控制进度显示



import SwiftUI

struct ReviewContentView: View {
    @State private var progressExternal = 0.3
    @State private var progressCentral = 0.7
    @State private var progressInternal = 0.5
    
    var body: some View {
        
        ZStack {
            YQProgressRingsView(
                progressExternal: $progressExternal,
                progressCentral: $progressCentral,
                progressInternal: $progressInternal)
            .aspectRatio(CGSize(width: 200, height: 200), contentMode: .fit)
            
            VStack(spacing: 10) {
                Spacer()
                Slider(value: $progressInternal, in: 0...1, step: 0.01).tint(.blue)
                Slider(value: $progressCentral, in: 0...1, step: 0.01).tint(.red)
                Slider(value: $progressExternal, in: 0...1, step: 0.01).tint(.green)
            }
            .padding(30)
        }
    }
}

struct ReviewContentView_Previews: PreviewProvider {
    static var previews: some View {
        ReviewContentView()
    }
}

/* 自定义圆环形状 */
struct YQProgressRing: Shape {
    private let startAngle = Angle.radians(1.5 * .pi) // 1.5从顶部12点位置开始算
    @Binding var progress: Double

    func path(in rect: CGRect) -> Path {
        Path { path in
            path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.width / 2, startAngle: startAngle, endAngle: startAngle + Angle(radians: 2 * .pi * progress), clockwise: false)
            
        }
    }
}


struct YQProgressRingsView: View {
    private let ringPadding = 5.0
    private let ringWidth = 40.0
    
    private var ringStrokeStyle: StrokeStyle {
        StrokeStyle(lineWidth: ringWidth, lineCap: .round, lineJoin: .round)
    }
    @Binding var progressExternal: Double
    @Binding var progressCentral: Double
    @Binding var progressInternal: Double
    
    var body: some View {
        ZStack {
            // 内部圆环
            YQProgressRing(progress: $progressInternal)
                .stroke(.blue, style: ringStrokeStyle)
                .padding(2*(ringWidth + ringPadding))
            
            // 中间
            YQProgressRing(progress: $progressCentral)
                .stroke(.red, style: ringStrokeStyle)
                .padding(ringWidth + ringPadding)
            
            // 外部
            YQProgressRing(progress: $progressExternal)
                .stroke(.green, style: ringStrokeStyle)
        }
        .padding(ringWidth)
    }
}