Kreisförmige Fortschrittsanzeige mit Steuerung

Beschreibung

DasDiese SteuernView einerzeigt farblicheine abgesetztenkreisförmige StatusanzeigeFortschrittsanzeige (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 einenden Slider.Nutzer
Der
• UI-Prototyping Bereichfür Health-, Fitness- oder Monitoring-Apps
• Demonstration von 0%Gauge-Komponenten bisin 100%SwiftUI
wird

von

🖥️ rotBetriebssystem

bis

iOS

grün

📄 entsprechend mit einem Farbverlauf dargestellt.

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 {
        VStackVStack(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()
}