Batterieanzeige mit kreisförmigem Farbverlauf

Beschreibung

Diese View zeigt den aktuellen Batteriestand als kreisförmige Gauge mit farbverlaufender Tönung von Rot über Gelb zu Grün. Ein Slider ermöglicht die direkte Anpassung des Werts und die Anzeige aktualisiert sich in Echtzeit inklusive Prozentlabel.

🔍 Zweck

• Visualisierung eines Batteriestands oder beliebiger Prozentwerte
• Demonstration von Gauge Styles mit Farbverlauf
• Interaktive Statusanzeige in Einstellungs oder Monitoring Screens
• Prototyping von Health oder Performance Indikatoren
• Lernbeispiel für Bindings zwischen Slider und Anzeige

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct BatteryGaugeGradientApp: App {
    var body: some Scene {
        WindowGroup {
            GaugeGradientExample()
        }
    }
}

public struct GaugeGradientExample: View {
    // Store battery level between 0.0 and 1.0
    @State private var batteryLevel: Double = 0.7

    public init() {}

    public var body: some View {
        VStack(spacing: 24) {
            // Circular gauge showing the current battery level
            Gauge(value: batteryLevel) {
                Text("Battery")
            } currentValueLabel: {
                // Present percentage as the current value label
                Text("\(Int(batteryLevel * 100))%")
            }
            .gaugeStyle(.accessoryCircular)
            // Apply a gradient tint from low to high values
            .tint(Gradient(colors: [.red, .yellow, .green]))
            .frame(width: 140, height: 140)
            .accessibilityLabel("Battery level")
            .accessibilityValue("\(Int(batteryLevel * 100)) percent")

            // Slider to interactively change the gauge value
            Slider(value: $batteryLevel, in: 0...1)
                .padding(.horizontal)
        }
        .padding()
    }
}

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