ios – How to attract a vertical linear gauge in swiftui properly?


I’m new to SwiftUI and simply begin to wrestle with my first challenge not too long ago(it’s about visualizing some datas). I really like how the Gauge struct in SwiftUI seems to be, so I wish to design views based mostly on it.

Now I wish to present a vertical linear gauge, however I bumped into some issues. Right here is the results of my code:

enter picture description right here

It seems to be fairly unusual that the vertical linear gauge’s padding to the underside is large. Right here is my code.

import SwiftUI

struct SingleValueVertical: View {
    @State var val: Float = 32.0
    @State var MinMax: (min: Float, max: Float) = (0, 50)
    
    var physique: some View {
        ZStack {
            HStack (alignment: .prime){
                VStack(alignment: .main) {
                    Picture(systemName: "airplane.departure")
                        .foregroundColor(.white)
                    Textual content("Velocity")
                        .font(.title2)
                        .foregroundColor(.white)
                        .opacity(0.9)
                    Textual content("(Int(val))")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                }
                RotatedGauge()
            }
            .padding([.bottom, .top], 30)
            .padding([.horizontal], 20)
        }
        .body(width: 200, top: 200)
        .background(.black.opacity(0.8))
        .cornerRadius(30)
//        .shadow(radius: 5)
    }
}

struct SingleValueVertical_Previews: PreviewProvider {
    static var previews: some View {
        SingleValueVertical()
    }
}

Excuse me for my unhealthy coding, however I actually wish to know that what’s unsuitable with my code. Is there some strategies to do it extra properly?

Due to any recommendation by advance.

I’ve tried so many googling, however not one of the outcomes gave me what I anticipated.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles