Animiertes Erfolgsbanner

Beschreibung

DiesesDiese BeispielView zeigt,zeigt wiebeim Auslösen einer Aktion ein temporäresBanner Benachrichtigungsbanneram oberen Bildschirmrand an, das den erfolgreichen Abschluss signalisiert. Das Banner blendet mit sanftereiner Animation in SwiftUI implementiert wird. Nach einem Button-Tap erscheint das Banner „✅ Task completed“ein und verschwindet automatisch nach 2einer Sekundenkurzen Verzögerung automatisch wieder.

---

🔍

🎯 AnwendungsfälleZweck

• BenutzerfeedbackVisuelles nachFeedback bei abgeschlossenen AktionenAufgaben
• KurzeAnzeige von Statusmeldungen (Uploadoder abgeschlossen, Formular erfolgreich gesendet etc.)Erfolgsbenachrichtigungen
• TemporäUnterstützung der Nutzerführung durch temporäre Hinweise
ohne
• Ersatz Navigationfür Toast- oder Snackbar-Elemente
• Demonstration von SwiftUI Animationen mit Transition

---

🖥️ Betriebssystem

iOS

💻📄 Quellcode (SwiftUI)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()
}