Cómo mostrar una alerta en SwiftUI

Las alertas son uno de los elementos más importantes en cualquier aplicación moderna. Sirven para comunicar errores, confirmar acciones, pedir permisos o mostrar información crítica al usuario. En el ecosistema de Apple, SwiftUI ofrece un sistema potente, declarativo y elegante para presentar alertas de forma consistente en iOS, iPadOS, macOS y otros sistemas.

En este tutorial aprenderás desde cero y de forma profesional cómo mostrar alertas en SwiftUI usando Xcode, desde el uso básico hasta configuraciones avanzadas con múltiples botones, roles, estilos, estados y compatibilidad con iOS moderno.

Este artículo está pensado tanto para principiantes como para desarrolladores intermedios que quieren dominar completamente el sistema de alertas de SwiftUI.

1. ¿Qué es una alerta en SwiftUI?

Una alerta es una vista modal que aparece encima del contenido principal de la app para captar la atención del usuario. Normalmente incluye:

• Un título
• Un mensaje
• Uno o más botones

Ejemplos típicos:

• “¿Deseas eliminar este archivo?”
• “No hay conexión a Internet”
• “Guardado correctamente”

SwiftUI permite definir alertas usando modificadores que dependen del estado de la vista, lo que encaja perfectamente con su filosofía declarativa.

2. Crear un proyecto SwiftUI en Xcode

Antes de comenzar, crea un proyecto nuevo:

1. Abre Xcode
2. Pulsa Create a new Xcode project
3. Elige App
4. Selecciona Interface: SwiftUI
5. Lenguaje: Swift
6. Guarda el proyecto

Abre ContentView.swift.

3. Primera alerta básica

Vamos a crear un botón que muestre una alerta cuando se pulse.

Paso 1 – Crear una variable de estado

SwiftUI usa variables @State para controlar cuándo aparece una alerta.

@State private var showAlert = false

Paso 2 – Crear el botón

Button("Mostrar alerta") {
    showAlert = true
}

Paso 3 – Añadir el modificador .alert

.alert("Hola", isPresented: $showAlert) {
    Button("OK", role: .cancel) { }
}

Código completo

struct ContentView: View {
    @State private var showAlert = false

    var body: some View {
        Button("Mostrar alerta") {
            showAlert = true
        }
        .alert("Hola", isPresented: $showAlert) {
            Button("OK", role: .cancel) { }
        }
    }
}

Cuando pulses el botón, aparecerá una alerta con el título “Hola” y un botón OK.

4. Añadir mensaje a la alerta

Las alertas pueden tener texto adicional.

.alert("Información", isPresented: $showAlert) {
    Button("Aceptar", role: .cancel) { }
} message: {
    Text("Esta es una alerta creada con SwiftUI.")
}

Esto mejora mucho la experiencia del usuario.

5. Alertas con múltiples botones

Una alerta puede tener varios botones para permitir decisiones.

.alert("Eliminar archivo", isPresented: $showAlert) {
    Button("Eliminar", role: .destructive) {
        print("Archivo eliminado")
    }
    Button("Cancelar", role: .cancel) { }
} message: {
    Text("¿Estás seguro de que quieres eliminar este archivo?")
}

Roles importantes:

SwiftUI usa el rol para colorear y ordenar los botones correctamente.

6. Ejecutar código cuando el usuario pulsa un botón

Cada botón puede ejecutar lógica:

Button("Guardar") {
    saveData()
}

Esto permite:

• Guardar datos
• Navegar
• Borrar contenido
• Enviar información

Las alertas no son solo visuales, son parte del flujo de la app.

7. Usar enums para manejar múltiples alertas

Una app real suele tener varias alertas. SwiftUI permite usar un enum.

enum AppAlert {
    case error
    case success
}

@State private var currentAlert: AppAlert?

.alert(item: $currentAlert) { alert in
    switch alert {
    case .error:
        return Alert(title: Text("Error"),
                     message: Text("Algo salió mal"),
                     dismissButton: .default(Text("OK")))
    case .success:
        return Alert(title: Text("Éxito"),
                     message: Text("Todo salió bien"),
                     dismissButton: .default(Text("Genial")))
    }
}

Esto permite controlar muchas alertas con una sola variable.

8. Alertas con campos de texto (iOS 17+)

En versiones modernas de iOS, puedes incluir TextField.

.alert("Nombre", isPresented: $showAlert) {
    TextField("Introduce tu nombre", text: $name)
    Button("Aceptar") { }
    Button("Cancelar", role: .cancel) { }
}

sto permite pedir datos directamente al usuario.

9. Buenas prácticas al usar alertas

Las alertas son útiles, pero deben usarse bien:

✔ Usar solo cuando sea necesario
✔ Mensajes claros
✔ Botones con texto descriptivo
✔ Evitar abusar de ellas
✔ No bloquear flujos innecesariamente

Una mala implementación de alertas frustra al usuario.

10. Diferencia entre Alert y ConfirmationDialog

SwiftUI también tiene confirmationDialog, ideal para menús de opciones.

Ejemplo:

.confirmationDialog("Opciones", isPresented: $showDialog) {
    Button("Eliminar", role: .destructive) { }
    Button("Editar") { }
}

11. Errores comunes

❌ Usar demasiadas alertas
❌ No usar @State
❌ No usar roles
❌ Usar mensajes vagos
❌ Alertas que bloquean la UX

12. Conclusión

Las alertas son una pieza fundamental de cualquier aplicación profesional. SwiftUI las hace extremadamente fáciles de implementar gracias a su enfoque declarativo basado en estado.

Has aprendido:

• Cómo crear alertas básicas
• Añadir mensajes
• Usar múltiples botones
• Ejecutar acciones
• Manejar múltiples alertas
• Usar campos de texto
• Aplicar buenas prácticas

Dominar las alertas en SwiftUI te permitirá crear aplicaciones más seguras, claras y profesionales.

Si estás desarrollando apps con Xcode y SwiftUI, este sistema es una herramienta imprescindible.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram