Batterieanzeige mit kreisförmigem Farbverlauf

Beschreibung

EineDiese View zeigt den aktuellen Batteriestand als kreisförmige Gauge mit einemfarbverlaufender FarbverlaufTönung von rotRot über gelbGelb nachzu grün,Grün. passendEin zumSlider Beispielermö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 eineBindings Batterienazeige.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 batteryLevelbatteryLevel: Double = 0.7

    public init() {}

    public var body: some View {
        VStackVStack(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)batteryLevel, in: 0...1)
                .padding(.horizontal)
        }
        .padding()
    }
}

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