Skip to main content

Temporäres Benachrichtigungsbanner mit Animation

Dieses Beispiel zeigt, wie ein temporäres Benachrichtigungsbanner mit sanfter Animation in SwiftUI implementiert wird. Nach einem Button-Tap erscheint das Banner „✅ Task completed“ und verschwindet automatisch nach 2 Sekunden wieder.


🎯 Anwendungsfälle

  • Benutzerfeedback nach abgeschlossenen Aktionen
  • Kurze Statusmeldungen (Upload abgeschlossen, Formular erfolgreich gesendet etc.)
  • Temporäre Hinweise ohne Navigation

💻 Quellcode (SwiftUI)

@State private var showBanner = false

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

        Spacer()

        Button("Complete Task") {
            withAnimation {
                showBanner = true
            }
            Task {
                try? await Task.sleep(nanoseconds: 2_000_000_000)
                withAnimation {
                    showBanner = false
                }
            }
        }
    }
    .padding()
}