iPhone SwiftUI layouts

Explore SwiftUI APIs, components, and modifiers with interactive iPhone previews, Swift code, and Apple documentation. Compare every available orientation, appearance, and design.

Gauge

AccessoryCircularCapacityGaugeStyle

A gauge style that displays a closed ring that’s partially filled in to indicate the gauge’s current value

Explore AccessoryCircularCapacityGaugeStyle on iPhone in portrait, with SwiftUI code and Apple API documentation.

SwiftUI code

Full details Docs 
@State private var currentValue = 0.42

var body: some View {
    HStack {
        Gauge(value: currentValue) {
            Text("Foo")
        }

        Gauge(value: currentValue) {
            Text("Foo")
        } currentValueLabel: {
            Text("\(currentValue)")
        }
        .padding(.horizontal)

        Gauge(value: currentValue) {
            Text("Foo")
        } currentValueLabel: {
            Text("42")
        } minimumValueLabel: {
            Text("0")
        } maximumValueLabel: {
            Text("100")
        }
    }
    .gaugeStyle(.accessoryCircularCapacity)
}

Compatibility

iOS 16.0+ iPadOS 16.0+ macOS 13.0+ watchOS 9.0+ visionOS 1.0+

Tags

Found an issue or have a suggestion?

All variants

Every available iPhone screenshot for AccessoryCircularCapacityGaugeStyle.

2 views