Technologies›SwiftUI

LinearCapacityGaugeStyle struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A gauge style that displays bar that fills from leading to trailing

How it works

LinearCapacityGaugeStyle displays a gauge as a horizontal bar that fills from its minimum toward its maximum, emphasizing how much of a bounded capacity is currently used. Reach for it when a value represents a portion of a fixed whole — a battery charge, a download in progress, a storage quota — and you want the at-a-glance "how full" reading that a linear track communicates. It is one of the built-in GaugeStyle conformers, so you apply it through the gaugeStyle(_:) modifier rather than constructing it directly, and it automatically lays out the gauge's labels around the bar.

  1. Provide a normalized value to Gauge

    The style renders the fill proportion from the gauge's value within its range. Here Gauge(value: charge) reads charge, a Double that defaults to 0.62, against the implicit 0...1 range, so the bar fills to roughly 62 percent.

  2. Select the style with .gaugeStyle(.linearCapacity)

    Applying .gaugeStyle(.linearCapacity) resolves to LinearCapacityGaugeStyle through its static accessor on GaugeStyle, switching the gauge from the default accessory presentation to the filled horizontal capacity bar.

  3. Label the bar with the gauge's label closures

    LinearCapacityGaugeStyle arranges the labels you pass to Gauge around the track: the label closure (Text("Battery")) names the gauge, while currentValueLabel, minimumValueLabel, and maximumValueLabel annotate the reading and the ends of the range — here Text("\(Int(charge * 100))%"), Text("0"), and Text("100").

  4. Color the fill with tint(_:)

    Because the style draws a fill, it honors the surrounding tint. .tint(.green) colors the filled portion of the capacity bar, letting you signal state — a green charge level here, where a warning color might suit a near-empty gauge.

Try it — Change @State private var charge = 0.62 to 0.95 and watch the linear bar fill almost to its maximumValueLabel end while the currentValueLabel updates to 95%.

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.

LinearCapacityGaugeStyle.swift
struct LinearCapacityGaugeStyleDemo: View {
    @State private var charge = 0.62
    var body: some View {
        Gauge(value: charge) {
            Text("Battery")
        } currentValueLabel: {
            Text("\(Int(charge * 100))%")
        } minimumValueLabel: {
            Text("0")
        } maximumValueLabel: {
            Text("100")
        }
        .gaugeStyle(.linearCapacity)
        .tint(.green)
        .padding()
    }
}
Live preview
Battery
Battery
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →