Animiertes Erfolgsbanner

Beschreibung

Diese View zeigt beim Auslösen einer Aktion ein Banner am oberen Bildschirmrand an, das den erfolgreichen Abschluss signalisiert. Das Banner blendet mit einer Animation ein und verschwindet nach einer kurzen Verzögerung automatisch wieder.

🔍 Zweck

• Visuelles Feedback bei abgeschlossenen Aufgaben
• Anzeige von Statusmeldungen oder Erfolgsbenachrichtigungen
• Unterstützung der Nutzerführung durch temporäre Hinweise
• Ersatz für Toast- oder Snackbar-Elemente
• Demonstration von SwiftUI Animationen mit Transition

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct AnimatedBannerApp: App {
    var body: some Scene {
        WindowGroup {
            BannerExample()
        }
    }
}

struct BannerExample: View {
    // Track if the banner is visible
    @State private var showBanner = false

    var body: some View {
        VStack {
            if showBanner {
                // Success banner with transition
                Text("✅ Task completed")
                    .padding()
                    .background(Color.green.opacity(0.8))
                    .cornerRadius(10)
                    .transition(.move(edge: .top).combined(with: .opacity))
            }

            Spacer()

            // Button triggers the success banner
            Button("Complete Task") {
                withAnimation {
                    showBanner = true
                }
                // Auto-dismiss the banner after delay
                Task {
                    try? await Task.sleep(nanoseconds: 2_000_000_000)
                    withAnimation {
                        showBanner = false
                    }
                }
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

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