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

CircularGaugeStyle

A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value

Explore CircularGaugeStyle 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: 0.42) {
      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(.circular)
}

Compatibility

watchOS 7.0+

Tags

Found an issue or have a suggestion?

All variants

Every available iPhone screenshot for CircularGaugeStyle.

1 views