Gauge struct

How it works

A Gauge is a view that shows a value within a bounded range, giving people an at-a-glance reading of where something stands between a known minimum and maximum. Reach for it whenever a quantity has natural limits and the position within those limits matters more than the raw number alone — battery level, download progress, a temperature against safe bounds, or a fitness ring toward a goal. Unlike a progress indicator, a Gauge is built to display a steady measurement rather than the advancement of a task, and its appearance adapts to platforms and contexts ranging from full panels to compact accessory widgets.

1. Bind a value to a range with Gauge(value:in:)

   The core initializer takes the current reading and the interval it lives in, then plots the value's relative position. Here Gauge(value: progress, in: 0...1) reads from the @State property progress (0.62) so the gauge fills to roughly 62% of its 0...1 range and updates automatically whenever that state changes.

2. Name the measurement with the label closure

   The trailing label describes what the gauge measures; some styles surface it, others use it for accessibility. The first closure supplies Text("Battery"), identifying the quantity being shown so the value has meaning beyond the bare number.

3. Surface readings with currentValueLabel, minimumValueLabel, and maximumValueLabel

   These optional closures annotate the gauge with the value itself and the labels for each end of the range. The example pairs currentValueLabel: showing Text(progress, format: .percent) with minimumValueLabel: of Text("0") and maximumValueLabel: of Text("100"), so the formatted percentage and the bounds appear alongside the indicator.

4. Choose an appearance with gaugeStyle(_:)

   The gaugeStyle(_:) modifier swaps the rendering between linear bars, full dials, and compact accessory forms without changing the value logic. Applying .gaugeStyle(.accessoryCircular) draws a small circular ring suited to dense layouts and complications, where the value label sits in the center.

5. Style the fill and spacing with standard view modifiers

   Because Gauge is an ordinary View, it composes with the usual modifier chain. The example applies .tint(.green) to color the active portion of the ring and .padding() to give it breathing room within its container.