Cree una alerta de error deslizante hacia abajo con SwiftUI y animaciones

Hola, soy Miguel y en esta ocasión les traigo otro tutorial.

En este breve tutorial de hoy, veremos cómo crear una alerta de error común que se ve así:

Hay tres cosas principales que aprenderá para crear esta simple animación:

Si eres un desarrollador de iOS experimentado, ya conoces todos estos, solo se trata de empaquetarlos. Sin embargo, si eres nuevo en el desarrollo de iOS, puedes estudiar los códigos que te daré. ¡Vamonos!

Primero, extendamos AnyTransition combinando dos transiciones que necesitamos para crear el efecto de deslizamiento y desvanecimiento:

extension AnyTransition {
    static var fadeAndSlide: AnyTransition {
        AnyTransition.opacity.combined(with: .move(edge: .top))
    }
}

A continuación, creemos la vista básica en mi ejemplo:

struct ContentView: View {
    
    @State private var shouldShowErrorLabel = false
    
    init() {
        UINavigationBar.appearance().backgroundColor = .blue
        UINavigationBar.appearance().largeTitleTextAttributes = [
            .foregroundColor : UIColor.white,
        ]
    }   
    var errorLabel: some View {
        HStack {
            Spacer()
            Text("Error!")
                .fontWeight(.bold)
                .foregroundColor(Color.white)
            Spacer()
        }
        .frame(height: 44.0)
        .background(Color.red)
    }    
    var body: some View {
        NavigationView {
            VStack {
                if shouldShowErrorLabel {
                    errorLabel.transition(.asymmetric(insertion: .fadeAndSlide, removal: .fadeAndSlide))
                    Spacer()
                    Spacer()
                }
            }
            .navigationBarTitle("Home", displayMode: .large)
            .onAppear {
                self.animateAndDelayWithSeconds(1) { self.shouldShowErrorLabel = true }
                self.animateAndDelayWithSeconds(3) { self.shouldShowErrorLabel = false }
            }
        }
    }   
    func animateAndDelayWithSeconds(_ seconds: TimeInterval, action: @escaping () -> Void) {
        DispatchQueue.main.asyncAfter(deadline: .now() + seconds) {
            withAnimation {
                action()
            }
        }
    }
}

Eso es todo por este breve tutorial, ¡espero que le brinde algunas ideas sobre cómo crear alertas simples para notificar a los usuarios de su aplicación!