Kreisförmige Fortschrittsanzeige mit Steuerung

Beschreibung

Diese View zeigt eine kreisförmige Fortschrittsanzeige (Gauge), die den aktuellen Wert in Prozent darstellt. Über einen Slider kann der Wert interaktiv verändert werden, wodurch sich die Anzeige dynamisch aktualisiert.

🔍 Zweck

• Darstellung von Fortschritt in Prozent
• Visualisierung von Lade- oder Statusindikatoren
• Kontrolle und Anpassung eines Wertes durch den Nutzer
• UI-Prototyping für Health-, Fitness- oder Monitoring-Apps
• Demonstration von Gauge-Komponenten in SwiftUI

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct GaugeExampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

public struct ContentView: View {
    // Store the current progress value between 0.0 and 1.0
    @State private var value: Double = 0.7

    public init() {}

    public var body: some View {
        VStack(spacing: 20) {
            // Gauge displaying progress with a circular capacity style
            Gauge(value: value) {
                Text("Progress")
            } currentValueLabel: {
                Text("\(Int(value * 100))%")
            }
            .gaugeStyle(.accessoryCircularCapacity)
            // Gradient tint indicates progress visually
            .tint(Gradient(colors: [.green, .yellow, .red]))
            .frame(width: 120, height: 120)

            // Slider to interactively change the gauge value
            Slider(value: $value)
                .padding()
        }
    }
}

// Modern Swift 5.10+ preview syntax
#Preview {
    ContentView()
}