我正在 SwiftUI 中創建自己的“圓形”進度條小部件，我想知道如何實作他的關注。如果圓圈進度為 100%（表示圓圈已滿），我希望線條的“開始”具有“淡出”效果，以便線條的開始和結束不會“合并”。我在 iOS 上的“電池”小部件中看到了這一點。以下是“滿”和“未滿”電池小部件的示例：
這是我當前的小部件代碼：
struct CircleProgressView: View {
@Binding var progress: Float
var body: some View {
ZStack {
Circle()
.stroke(lineWidth: 10)
.opacity(0.3)
.foregroundColor(Color(UIColor.systemGray3))
Circle()
.trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
.stroke(style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
.foregroundColor(Color(UIColor.systemGreen))
.rotationEffect(Angle(degrees: 270.0))
}
.padding()
}
}
任何想法都會有所幫助。
uj5u.com熱心網友回復：
這是一種方法。我堆疊了4個圓圈：
- 灰色基地
- 第一個接收陰影的綠色圓圈
- 一個圓圈用陰影 clipshape 夾在一個點上，以消除圓圈兩側的陰影
- 另一個綠色圓圈覆寫一側的陰影
這是代碼：
struct CircleProgressView: View {
@Binding var progress: Float
var body: some View {
ZStack {
// grey background circle
Circle()
.stroke(lineWidth: 30)
.opacity(0.3)
.foregroundColor(Color(UIColor.systemGray3))
// green base circle to receive shadow
Circle()
.trim(from: 0.0, to: CGFloat(min(self.progress, 0.5)))
.stroke(style: StrokeStyle(lineWidth: 30, lineCap: .round, lineJoin: .round))
.foregroundColor(Color(UIColor.systemGreen))
.rotationEffect(Angle(degrees: 270.0))
// point with shadow, clipped
Circle()
.trim(from: CGFloat(min(self.progress, 1.0))-0.001, to: CGFloat(min(self.progress, 1.0))-0.0005)
.stroke(style: StrokeStyle(lineWidth: 30, lineCap: .round, lineJoin: .round))
.foregroundColor(Color(UIColor.blue))
.shadow(color: .black, radius: 10, x: 0, y: 0)
.rotationEffect(Angle(degrees: 270.0))
.clipShape(
Circle().stroke(lineWidth: 30)
)
// green overlay circle to hide shadow on one side
Circle()
.trim(from: progress > 0.5 ? 0.25 : 0, to: CGFloat(min(self.progress, 1.0)))
.stroke(style: StrokeStyle(lineWidth: 30, lineCap: .round, lineJoin: .round))
.foregroundColor(Color(UIColor.systemGreen))
.rotationEffect(Angle(degrees: 270.0))
}
.padding()
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/444109.html