想要制作一个带有指示箭头的仪表视图和指示进度的仪表视图显示圆圈

Question

根据图像，基于箭头的工作原理，但现在如何在仪表视图上再添加一个白色圆圈，并像白色 aarow 一样移动。

下面是代码

type here 
struct Home : View {
    var body: some View{
        
        VStack{
            
            Meter
            .padding(.top, 10)
        }
    }
}


struct Meter : View {
    //speedometerBgColor
    let colors = [Color("speedoColor5"),Color("speedoColor25"),Color("speedoColor50"),Color("speedoColor100")]
    @State var progress : CGFloat = 0.0
    
    var body: some View{
        
        ZStack{
            
            ZStack{
                
                Circle()
                    .trim(from: 0.0, to: 0.5)
                    .stroke(Color("speedometerBgColor"), lineWidth: 10)
                    .frame(width: 280, height: 280)
                
                
                Circle()
                    .trim(from: 0, to: self.setProgress())
                    .stroke(AngularGradient(gradient: .init(colors: self.colors), center: .center, angle: .init(degrees: 180)), lineWidth: 10)
                    .frame(width: 280, height: 280)
                
                
                
            }
            .rotationEffect(.init(degrees: 180))
            if isFromHomeScreen{
                ProgressBarTriangle().rotationEffect(.degrees(self.setArrow()), anchor: .bottomTrailing)
                    .rotationEffect(.init(degrees: -40)).padding(EdgeInsets(top: 0, leading: -85, bottom: 40, trailing: 0))
            
            ZStack(alignment: .bottom) {
                Circle()
                    .fill(self.colors[3])
                    .frame(width: 25, height: 25).padding(.init(top: 0, leading: 0, bottom: 40, trailing: 0))
            }
            
        }
        }.padding(.bottom, -140)
        
    }
     .onAppear {
                withAnimation(Animation.default.speed(0.1)){
 progress = CGFloat(Int(newValue)) self.progress = 100 
}
            }
    
    func setProgress()->CGFloat{
        
        let temp = self.progress / 2
        return temp * 0.01
    }
    
    func setArrow()->Double{
        
        let temp = self.progress / 100
        return Double(temp * 180)
    }
}

struct ProgressBarTriangle: View {
       // @Binding var progress: Float
        
        
        var body: some View {
            ZStack{
                Image("arrow")
                
            }
        }
    }

我正在尝试更换图像

struct ProgressBarTriangle: View {
       // @Binding var progress: Float
        
        
        var body: some View {
            ZStack{
                Image("arrowWithCirclePointer")
                
            }
        }
    }

Answer 1

首先，要重现仪表的指示器，我建议您使用像这样的形状：

struct IndicatorShape: Shape {
    
    func path(in rect: CGRect) -> Path {
        return Path { path in
            let width = rect.width
            let height = rect.height
            
            path.move(to: CGPoint(x: width / 2, y: 0))
            path.addLine(to: CGPoint(x: 0, y: height))
            path.addLine(to: CGPoint(x: width, y: height))
        }
    }
    
}

然后在代码中像任何其他视图一样使用它。要在指标上添加圆圈，您可以使用简单的叠加层：

IndicatorShape()
            .fill(.indicator)
            .overlay(alignment: .bottom) {
                /// Circle at the base of the Indicator
                Circle()
                    .fill(.indicator)
                    .frame(width: 30, height: 30)
                    .overlay {
                        Circle()
                            .fill(.black)
                            .padding(6)
                    }
                    .offset(y: 10)
            } //: Overlay Indicator Bottom Dot
            .frame(width: 25)
            .padding(.top, 40)
            .offset(y: -5)
            .overlay(alignment: .top) {
                /// Here is the Circle above the Indicator
                Circle()
                    .frame(width: 20, height: 20)
                    .offset(y: -5)
            }
            /// These two lines are to make the Indicator and the Cirlce move
            .rotationEffect(.degrees(-90), anchor: .bottom)
            .rotationEffect(.degrees(progress * 180), anchor: .bottom)

当然，您可能需要调整圆的偏移位置，并进行您需要的任何其他调整。 让我知道这是否对您有用！