跳转至
Structure

ProgressViewStyleConfiguration

The properties of a progress view instance.

Declaration

struct ProgressViewStyleConfiguration

Overview

This is the type of the parameter in ProgressViewStyle's one required function: makeBody(configuration:).

This structure comes with several properties for you to read in that function:

  • fractionCompleted
  • ProgressViewStyleConfiguration/label
  • ProgressViewStyleConfiguration/currentValueLabel

Here is an example of a custom style created by reading these values:

struct ArcProgressViewStyle: ProgressViewStyle {
    var color = Color.orange
    var style = StrokeStyle(lineWidth: CGFloat(30), lineCap: .round)

    func makeBody(configuration: ProgressViewStyleConfiguration) -> some View {
        let frac = CGFloat(configuration.fractionCompleted ?? 0)

        return ZStack {
            VStack {
                configuration.label
                configuration.currentValueLabel
            }
            Circle()
                .trim(from: 0, to: frac)
                .stroke(color, style: style)
                .rotationEffect(.degrees(-90))
        }
    }
}
You can then use the style on a ProgressView:

struct ContentView: View {
    var body: some View {
        ProgressView(value: 5, total: 10) {
            Text("Progress is happening !🎡")
        } currentValueLabel: {
            Text("50% done")
                .font(.caption)
        }
        .progressViewStyle(ArcProgressViewStyle())
    }
}
A screenshot of a custom progress view that renders as an orange semicircle occupying the right hand side of the screen with two text views at its center, reading "Progress is happening!" and "50% done".

You can also just pass this property wholesale to ProgressView's init(_:):

struct DarkBlueShadowProgressViewStyle: ProgressViewStyle {
    func makeBody(configuration: Configuration) -> some View {
        ProgressView(configuration)
            .shadow(color: Color(red: 0, green: 0, blue: 0.6),
                    radius: 4.0, x: 1.0, y: 2.0)
    }
}
Then apply it to a ProgressView:

struct ShadowedProgressViews: View {
    var body: some View {
        VStack(spacing: 50) {
            ProgressView()
            ProgressView(value: 0.75)
        }
        .progressViewStyle(DarkBlueShadowProgressViewStyle())
    }
}
A gif showing a view with a VStack containing a ProgressView with a custom style; a circular gray progress spinner sits above a progress bar filled 75% by a dark blue bar with a dramatic shadow.

Availability

iOS 14.0+

macOS 11.0+

tvOS 14.0+

watchOS 7.0+

Topics


Structure

CurrentValueLabel A type-erased label that describes the current value of a progress view.

Label A type-erased label describing the task represented by the progress view.


Instance Property

currentValueLabel A view that describes the current value of a progress view.

fractionCompleted The completed fraction of the task represented by the progress view, from 0.0 (not yet started) to 1.0 (fully complete), or nil if the progress is indeterminate.

label A view that describes the task represented by the progress view.