效果圖
RingView.png
//
// ContentView.swift
// SwiftUIDemo
//
// Created by Haoyu on 2021/10/15.
//
import SwiftUI
struct RingView: View {
var width: CGFloat = 200
var percent: CGFloat = 90
var color1 = #colorLiteral(red: 0.2078431487, green: 0.56745098062, blue: 0.5333333433, alpha: 1)
var color2 = #colorLiteral(red: 0.6078431487, green: 0.06745098062, blue: 0.5333333433, alpha: 1)
var body: some View {
let mutiplier = width / 44
let progress = 1 - percent / 100
return ZStack {
Circle()
.stroke(Color.black.opacity(0.1),
style: StrokeStyle(lineWidth: 5 * mutiplier))
.frame(width: width, height: width)
Circle()
.trim(from: progress, to: 1)
.stroke(
LinearGradient(gradient: Gradient(colors: [Color(color1), Color(color2)]), startPoint: .topLeading, endPoint: .bottomTrailing),
style: StrokeStyle(lineWidth: 5 * mutiplier, lineCap: .round, lineJoin: .round)
)
.rotationEffect(Angle(degrees: 90))
.rotation3DEffect(Angle(degrees: 180), axis: (x: 1, y: 0, z: 0))
.frame(width: width, height: width)
.shadow(color: Color(color1).opacity(0.1), radius: 3, x: 0, y: 3)
Text("\(Int(percent))%")
.font(.system(size: 14 * mutiplier))
.fontWeight(.bold)
}
}
}
struct RingView_Previews: PreviewProvider {
static var previews: some View {
RingView()
}
}
