How it works
GaugeStyle is the protocol that defines the appearance and presentation of a Gauge, letting you swap a gauge's look without changing the value it reports. SwiftUI ships several concrete styles, and you select one with the gaugeStyle(_:) modifier rather than constructing the style directly. Reach for it when you want a gauge to read as a compact ring, a linear bar, or another shape that fits the surrounding layout — for example a dial that belongs in an accessory-sized space.
Apply a style with the gaugeStyle(_:) modifier
GaugeStyletakes effect through thegaugeStyle(_:)view modifier, which you attach to aGauge. It sets the style for that gauge and any gauges nested inside it, so a single call propagates down the view tree. Here.gaugeStyle(.accessoryCircular)renders the gauge as a compact circular dial.Pick a built-in conforming style
You rarely write a type that conforms to
GaugeStyleyourself; instead you choose one of the standard values that conform to it..accessoryCircularis one such style — a small ring suited to tight spaces — alongside others like linear and capacity variants that present the same value differently.Feed the style a value and labels from Gauge
The style draws whatever the
Gaugesupplies: itsvalueand the closures that build its labels. In the exampleGauge(value: 0.7)provides the fill amount, the trailingText("Speed")becomes the gauge's label, and thecurrentValueLabelclosure returningText("70%")supplies the readout the circular style places at its center.Refine the styled gauge with tint and layout modifiers
Because
gaugeStyle(_:)returns a regular view, you keep chaining modifiers after it..tint(.blue)colors the style's active track, and.padding()insets the result — these compose with the chosenGaugeStylerather than replacing it.
.gaugeStyle(.accessoryCircular) to .gaugeStyle(.linearCapacity) to watch the same value: 0.7 redraw as a horizontal bar instead of a ring.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 GaugeStyleDemo: View {
var body: some View {
Gauge(value: 0.7) {
Text("Speed")
} currentValueLabel: {
Text("70%")
}
.gaugeStyle(.accessoryCircular)
.tint(.blue)
.padding()
}
}