如何在圆形进度条提示中添加图标？

Question

我正在尝试在圆圈中的进度条顶端添加一个图标。这是我到目前为止的代码：

Circle()
    .trim(from: 0, to: 0.6)
    .stroke(style: StrokeStyle(lineWidth: 24, lineCap: .round, lineJoin: .round))
    .rotationEffect(.degrees(-90))
    .foregroundColor(.green)
    .frame(width: 300, height: 300)
    .padding()

最终看起来像这样：

但我正在尝试在进度提示中添加一个图标，如下所示：

我如何在 SwiftUI 中实现这一点？

Answer 1

使用左箭头图标并将其放入 ZStack 并将 y 偏移设置为负。

struct DemoView: View {
    
    @State private var angle: Double = -90
    
    var body: some View {
        ZStack {
            Circle()
                .trim(from: 0, to: 0.6)
                .stroke(style: StrokeStyle(lineWidth: 24, lineCap: .round, lineJoin: .round))
                .rotationEffect(.degrees(angle))
                .foregroundColor(.green)
            
            
            Image("left-arrow")
                .offset(y: -150)
                .rotationEffect(.degrees(305 + angle))
        }.frame(width: 300, height: 300)
        .padding()
    }
}

我使用来自 here

的进度代码添加了一个图像箭头

struct ProgressBar: View {
    @Binding var progress: Float
    
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: .center) {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.red)
                
                Circle()
                    .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(Color.red)
                    .rotationEffect(Angle(degrees: 270.0))
                    .animation(.linear)
                
                Text(String(format: "%.0f %%", min(self.progress, 1.0)*100.0))
                    .font(.largeTitle)
                    .bold()
                
                Image("left-arrow")
                    .offset(y: -(geo.size.height/2))
                    .rotationEffect(.degrees(Double(self.progress) * 360))
                    .animation(.linear)
            }
        }
    }
}