iosswiftxcodeswiftuiuiprogressview

Change size (height) of ProgressView in SwiftUI


I created a ProgressView in SwiftUI (using Xcode) and edited a bit but haven’t figured out how to change its height.

struct ProgressBar: View {
    var body: some View {
        VStack {
            ProgressView("Progres:", value: 50, total: 100)
        }.foregroundColor(Color(UIColor.systemBlue))
        .scaleEffect(1, anchor: .center)
        .accentColor(Color(UIColor.systemGreen))
    }
}

Solution

  • There's no direct way that I know of to change the height, but you can use the .scaleEffect modifier. Make sure to specify 1 for the x scale in order to only increase the height.

    struct ContentView: View {
        var body: some View {
            ProgressBar()
            .padding([.leading, .trailing], 10)
        }
    }
    
    struct ProgressBar: View {
        var body: some View {
            VStack {
                ProgressView(value: 50, total: 100)
                .accentColor(Color.green)
                .scaleEffect(x: 1, y: 4, anchor: .center)
            }
        }
    }
    

    Result: Progress bar with larger height

    A drawback to this is that you can't pass in a Label, because it will also get stretched.

    ProgressView("Progress:", value: 50, total: 100)
    

    The label "Progress:" stretched vertically

    To work around this, just make your own Text above the ProgressView.

    struct ProgressBar: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Progress:")
                .foregroundColor(Color.blue)
                
                ProgressView(value: 50, total: 100)
                .accentColor(Color.green)
                .scaleEffect(x: 1, y: 4, anchor: .center)
            }
        }
    }
    

    "Progress:" is not stretched