How it works
AccessoryCircularGaugeStyle renders a Gauge as a compact, ring-shaped indicator that sweeps an arc to represent a value within its bounds. It's the style you reach for when you need a glanceable, space-efficient readout — the kind that fits inside a widget, a watchOS complication, or a dense dashboard cell — rather than a full-width bar. Because it conforms to GaugeStyle, you don't construct it directly; you hand it to a gauge through the styling system, and SwiftUI takes care of laying out the arc, the labels, and the fill.
Drive the arc with a Gauge value
AccessoryCircularGaugeStyle reads a normalized value to decide how far around the ring to fill. Here the gauge is fed
value: speed, a@StateDouble of0.62, so the arc sweeps to roughly 62% of its track. Without an explicitin:range, the value is interpreted against the default 0...1 bounds.Apply the style with .gaugeStyle(.accessoryCircular)
Rather than instantiating the struct, you select it through the
gaugeStyle(_:)modifier using the.accessoryCircularshorthand, as in.gaugeStyle(.accessoryCircular). This is the entry point that swaps the gauge's default presentation for the circular accessory form across the gauge and its labels.Provide the label and current-value views
The style arranges the gauge's accessory content around and inside the ring. The trailing
labelclosure suppliesText("SPD")as a caption, while thecurrentValueLabelclosure rendersText("\(Int(speed * 100))")at the center of the arc — the style positions both for you so the numeric readout sits within the ring.Color the fill with .tint
AccessoryCircularGaugeStyle draws its progress track using the view's tint, so
.tint(.green)paints the filled portion of the arc green. The unfilled remainder stays in a muted track color, keeping the indicator readable at small sizes.
@State private var speed = 0.62 to 1.0 and watch the green arc sweep all the way around the ring while the centered readout climbs to 100.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct AccessoryCircularGaugeStyleDemo: View {
@State private var speed = 0.62
var body: some View {
Gauge(value: speed) {
Text("SPD")
} currentValueLabel: {
Text("\(Int(speed * 100))")
}
.gaugeStyle(.accessoryCircular)
.tint(.green)
.padding()
}
}