Botones en SwiftUI: Primera parte - Lo Básico

Introducción a los Botones en SwiftUI

Los botones son elementos esenciales de cualquier interfaz de usuario. Imagina una app sin botones - ¿cómo navegarías o realizarías acciones? Imposible, ¿verdad? En SwiftUI, los botones son increíblemente flexibles y fáciles de implementar, lo que te permite crear experiencias de usuario interactivas con poco código.

Un botón en SwiftUI consta de dos partes principales:

• Una acción: lo que sucede cuando el usuario toca el botón
• Una vista: cómo se ve el botón en la pantalla

Antes de comenzar, asegúrate de tener instalada la última versión de Xcode para aprovechar todas las características de SwiftUI que cubriremos.

Creando un proyecto con SwiftUI

Para seguir este tutorial, necesitarás crear un nuevo proyecto con SwiftUI habilitado:

1. Abre Xcode
2. Selecciona "Crear un nuevo proyecto de Xcode"
3. Elige la plantilla "App"
4. Nombra tu proyecto (por ejemplo, "SwiftUIBotones")
5. Asegúrate de que "SwiftUI" esté seleccionado como interfaz
6. Elige el destino de tu aplicación (iOS, macOS, etc.)

Creando un Botón Básico

SWIFT
Button("Tócame") {
    print("¡Botón tocado!")
}

La anatomía de un botón

SWIFT
Button(action: {
    print("¡He sido tocado!")
}) {
    Text("Tócame")
}

O de manera más concisa:

SWIFT
Button("Tócame") {
    print("¡He sido tocado!")
}

Personalizando la Apariencia de los Botones

Cambiando los colores

SWIFT
Button("Botón Colorido") {
    print("¡Color por todas partes!")
}
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(10)

Añadiendo padding y bordes

SWIFT
Button("Botón con Estilo") {
    print("¡Qué elegante!")
}
.padding()
.foregroundColor(.purple)
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(Color.purple, lineWidth: 2)
)

Estilos de botones predefinidos

SWIFT
VStack(spacing: 20) {
    Button("Estilo Predeterminado", action: {})
        .buttonStyle(.automatic)
    
    Button("Estilo Bordeado", action: {})
        .buttonStyle(.bordered)
    
    Button("Estilo Bordeado Prominente", action: {})
        .buttonStyle(.borderedProminent)
    
    Button("Estilo Plano", action: {})
        .buttonStyle(.plain)
}

Añadiendo Iconos a los Botones

Botón solo con icono

SWIFT
Button(action: {
    print("¡Me encanta esto!")
}) {
    Image(systemName: "heart.fill")
        .font(.title)
        .foregroundColor(.red)
}

Botón con icono y texto

SWIFT
Button(action: {
    print("¡Compartiendo!")
}) {
    Label("Compartir", systemImage: "square.and.arrow.up")
        .padding()
        .foregroundColor(.white)
        .background(Color.blue)
        .cornerRadius(10)
}

También puedes personalizar la posición del icono:

SWIFT
Button(action: {
    print("¡Guardado!")
}) {
    HStack {
        Text("Guardar")
        Image(systemName: "arrow.down.doc.fill")
    }
    .padding()
    .foregroundColor(.white)
    .background(Color.green)
    .cornerRadius(10)
}

Deshabilitando Botones

SWIFT
struct ContentView: View {
    @State private var username = ""
    
    var body: some View {
        VStack(spacing: 20) {
            TextField("Nombre de usuario", text: $username)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)
            
            Button("Iniciar Sesión") {
                print("Iniciando sesión como \(username)")
            }
            .padding()
            .foregroundColor(.white)
            .background(username.isEmpty ? Color.gray : Color.blue)
            .cornerRadius(10)
            .disabled(username.isEmpty)
        }
    }
}

Roles de Botones

Botones destructivos

SWIFT
Button("Eliminar cuenta", role: .destructive) {
    print("¡Cuenta eliminada!")
}
.padding()
.background(Color(UIColor.systemBackground))
.cornerRadius(10)
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(Color.red, lineWidth: 2)
)

Botones de cancelación

SWIFT
Button("Cancelar", role: .cancel) {
    print("Operación cancelada")
}

Botones de Ancho Completo

SWIFT
Button("Iniciar Sesión") {
    print("Iniciando sesión...")
}
.padding()
.frame(maxWidth: .infinity)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
.padding(.horizontal)

Botones con Gradientes y Sombras

SWIFT
Button(action: {
    print("¡Botón elegante tocado!")
}) {
    Text("Botón Elegante")
        .font(.headline)
        .foregroundColor(.white)
        .padding()
        .frame(maxWidth: .infinity)
        .background(
            LinearGradient(
                gradient: Gradient(colors: [.purple, .blue]),
                startPoint: .leading,
                endPoint: .trailing
            )
        )
        .cornerRadius(10)
        .shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2)
}
.padding(.horizontal)

Ejemplo Práctico: Formulario de Contacto

SWIFT
struct ContactForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var message = ""
    @State private var showingConfirmation = false
    @State private var showingCancelAlert = false
    
    var formIsValid: Bool {
        !name.isEmpty && !email.isEmpty && !message.isEmpty
    }
    
    var body: some View {
        VStack(alignment: .leading, spacing: 15) {
            Text("Formulario de Contacto")
                .font(.title)
                .bold()
            
            TextField("Nombre", text: $name)
                .textFieldStyle(.roundedBorder)
            
            TextField("Email", text: $email)
                .textFieldStyle(.roundedBorder)
                .keyboardType(.emailAddress)
            
            TextField("Mensaje", text: $message)
                .textFieldStyle(.roundedBorder)
                .frame(height: 100)
            
            HStack {
                Button(role: .cancel) {
                    showingCancelAlert = true
                } label: {
                    Label("Cancelar", systemImage: "xmark.circle")
                }
                .padding()
                .foregroundColor(.red)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.red, lineWidth: 1)
                )
                
                Spacer()
                
                Button {
                    showingConfirmation = true
                } label: {
                    Label("Enviar", systemImage: "paperplane.fill")
                }
                .padding()
                .foregroundColor(.white)
                .background(formIsValid ? Color.blue : Color.gray)
                .cornerRadius(10)
                .disabled(!formIsValid)
            }
        }
        .padding()
        .alert("¿Estás seguro?", isPresented: $showingCancelAlert) {
            Button("No", role: .cancel) { }
            Button("Sí, cancelar", role: .destructive) {
                name = ""
                email = ""
                message = ""
            }
        }
        .alert("¡Gracias!", isPresented: $showingConfirmation) {
            Button("OK") { }
        } message: {
            Text("Tu mensaje ha sido enviado. Te contactaremos pronto.")
        }
    }
}

Conclusión

¡Felicidades! Has completado este tutorial sobre botones en SwiftUI. Ahora deberías tener una buena comprensión de:

• Cómo crear botones básicos en SwiftUI
• Cómo personalizar la apariencia de los botones
• Cómo añadir iconos a los botones
• Cómo deshabilitar botones cuando sea necesario
• Qué son los roles de botones y cuándo usarlos
• Cómo crear botones más avanzados con gradientes y sombras

¿Qué sigue?

Si te ha gustado este tutorial, ¡mantente atento! Pronto publicaremos más tutoriales sobre:

• Trabajando con listas y celdas personalizadas
• Navegación entre vistas
• Formularios y entrada de datos
• Animaciones en SwiftUI
• Gestión de estados con @State y @Binding

¿Tienes preguntas o sugerencias? ¡Déjalas en los comentarios!

Ejercicios prácticos

• Crea un botón que cambie de color cuando se mantiene presionado
• Implementa un contador que incremente un número cada vez que se presiona un botón
• Crea una fila de botones de redes sociales con los iconos correspondientes
• Diseña un botón personalizado que se anime cuando se toque

¡Diviértete experimentando con SwiftUI y nos vemos en el próximo tutorial!