DFWatchStepCountCircle.swift
3.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
//
// DFWatchStepCountCircle.swift
// iwatch
//
// Created by 权海 on 2026/6/12.
//
import SwiftUI
struct DFWatchStepCountCircle: View {
/// 0...1
var progress: CGFloat
/// 中间显示的分数
var value: Int
var lineWidth: CGFloat = 6
var markerSize: CGFloat = 8
private let gradientColors: [Color] = [
Color(hex: "#845EEE"),
Color(hex: "#845EEE"),
]
var body: some View {
GeometryReader { geometry in
let size = min(geometry.size.width, geometry.size.height)
let arcSize = size - markerSize
let startAngle: CGFloat = 90
let sweepAngle: CGFloat = 270
let rotation = 0.128 * 360
let clampedProgress = min(max(progress, 0), 1)
ZStack {
Color.black
// 渐变进度圆弧
Circle()
.trim(from: 0.25, to: 1)
.stroke(
AngularGradient(
gradient: Gradient(colors: gradientColors),
center: .center,
startAngle: .degrees(Double(startAngle)),
endAngle: .degrees(Double(startAngle + sweepAngle))
),
style: StrokeStyle(
lineWidth: lineWidth,
lineCap: .round,
lineJoin: .round
)
)
.frame(width: arcSize, height: arcSize)
.rotationEffect(.degrees(rotation))
.opacity(0.3)
Circle()
.trim(from: 0.25, to: 0.25 + progress * 3/4)
.stroke(
AngularGradient(
gradient: Gradient(colors: gradientColors),
center: .center,
startAngle: .degrees(Double(startAngle)),
endAngle: .degrees(Double(startAngle + sweepAngle))
),
style: StrokeStyle(
lineWidth: lineWidth,
lineCap: .round,
lineJoin: .round
)
)
.frame(width: arcSize, height: arcSize)
.rotationEffect(.degrees(rotation))
// 中间数值
Text("\(value)")
.font(.system(size: 9, weight: .bold, design: .rounded))
.lineLimit(1)
.foregroundStyle(.white)
.frame(maxWidth: geometry.size.width - 20)
.minimumScaleFactor(0.8)
.offset(y: -size * 0.02)
// 底部爱心
FootprintsIcon(color: gradientColors.first!)
.frame(width: 14, height: 14)
.offset(y: geometry.size.height - 28)
}
.frame(width: size, height: size)
}
.aspectRatio(1, contentMode: .fit)
}
}
struct FootprintsIcon: View {
var color: Color
var body: some View {
Image(systemName: "shoeprints.fill")
.resizable()
.scaledToFit()
.foregroundStyle(color)
}
}