SwiftUI-自定义进度条

import SwiftUI

struct CirclerPercentProgressViewStyle: ProgressViewStyle {
    public func makeBody(configuration: LinearProgressViewStyle.Configuration) -> some View {
        VStack {
            configuration.label
                .foregroundColor(Color.secondary)
            
            ZStack {
                Circle()
                    .stroke(lineWidth: 15.0)
                    .opacity(0.3)
                    .foregroundColor(Color.accentColor.opacity(0.5))
                
                Circle()
                    .trim(from: 0.0, to: CGFloat(configuration.fractionCompleted ?? 0))
                    .stroke(style: StrokeStyle(lineWidth: 15.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(Color.accentColor)
                
                Text("\(Int((configuration.fractionCompleted ?? 0) * 100)) %")
                    .font(.headline)
                    .foregroundColor(Color.secondary)
            }
        }
    }
}

struct DemoPageView: View {
    
    @State private var doubleAmount = 0.0
    
    var body: some View {
        NavigationView {
            VStack {
                ProgressView("Downloading...", value:doubleAmount,total:100)
                    .progressViewStyle(CirclerPercentProgressViewStyle())
                    .frame(width: 120, height: 120,alignment: .center)
                    .padding()
                
                Button(action: {
                    withAnimation {
                        if doubleAmount < 100 {
                            doubleAmount += 10
                        }
                        
                    }
                },label: {
                    Text("+10%")
                })
            }
            .navigationBarTitle("ProgressView",displayMode: .inline)
        }
    }
}

struct DemoPageView_Previews: PreviewProvider {
    static var previews: some View {
        DemoPageView()
    }
}

效果如图：

image.png

参考：https://medium.com/@prafullkumar77/swiftui-how-to-make-circular-progress-view-97d32656c312