SwiftUI - Alert - Alten Spain

SwiftUI – Alert

January 1, 2021

Qué es Alert

El componente Alert permite crear una alerta nativa del sistema. Estas alertas se suelen componer de de un texto descriptivo y botones de acción.

Normalmente se usa para notificar al usuario sobre algo que ocurre en la aplicación o cuando debe tomar una decisión de aceptar o cancelar. Es un componente equivalente a UIAlertController de tipo .alert de UIKit. Como siempre, aquí puedes consultar la documentación oficial.

Para crear el componente se usa el siguiente inicializador:

Alert(title: Text("A question"), message: Text("Are you sure about that?"), primaryButton: .default(Text("Yes")), secondaryButton: .cancel(Text("No")))

El componente puede mostrar un título y una descripción y hasta dos botones. Estos botones pueden ser del siguiente tipo:

.default. Es el estilo por defecto.
.cancel. Representa la cancelación de la acción.
.destructive. Representa la destrucción de algún dato.

Estos estilos llevan asociada una representación visual acorde a la que se puede encontrar en todo el sistema operativo, por lo que es recomendable usar cada uno de ellos dependiendo de la acción asociada a cada uno de ellos.

Para ejecutar alguna acción al pulsar los botones del Alert se debe implementar el closure de cada uno de los botones que se ejecutará cuando se pulse cada botón.

Alert(title: Text("A question"), message: Text("Are you sure about that?"), primaryButton: .default(Text("Yes")) {
    //Pressed button Yes. Do Something
}, secondaryButton: .destructive(Text("No")) {
    //Pressed button No. Do Something
})

Cómo mostramos un Alert

Un Alert no se puede presentar de la misma forma que mostramos otros componentes de SwiftUI, ya que ni siquiera implementa el protocolo View.

Para mostrar un Alert hay que usar el modificador alert de View sobre la vista que queramos que lo presente. Este modificador necesita una variable de estado de tipo Bool, que será la encargada de indicar si el Alert es visible (true) o no (false).

@State private var showAlert = false

...

.alert(isPresented: $showAlert) {
    Alert(title: Text("A question"), message: Text("Are you sure about that?"), primaryButton: .default(Text("Yes")), secondaryButton: .destructive(Text("No")))
}

En este ejemplo, la propiedad showAlert deberá ser seteada a true cuando queramos que se muestre el Alert (por ejemplo cuando pulsemos un botón)

Está lógica es la misma que se usa con un NavigationLink cuando controlamos la navegación de forma manual.

Un ejemplo completo para mostrar un Alert sería el siguiente:

struct ContentView: View {
    @State private var showAlert = false
    @State private var buttonPressed: String?
    
    var body: some View {
        VStack(spacing: 15) {
            Button("Show Alert") {
                showAlert.toggle()
            }
            if let buttonPressed = buttonPressed {
                Text("You pressed (buttonPressed) button")
            }
            
        }
        .alert(isPresented: $showAlert) {
            Alert(title: Text("A question"), message: Text("Are you sure about that?"), primaryButton: .default(Text("Yes")) {
                buttonPressed = "Yes"
            }, secondaryButton: .destructive(Text("No")) {
                buttonPressed = "No"
            })
        }
    }
}