Creación de Componentes Reutilizables con @Binding en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Clase 19: Creación de Componentes Reutilizables con @Binding

En esta clase aprenderás qué es @Binding y cómo usarlo para conectar datos entre vistas. También modularizaremos el código del formulario creando un componente reutilizable llamado NTextField. Este componente reutilizará el diseño existente en el formulario, ayudándote a optimizar y mantener tu código limpio y organizado.

1. ¿Qué es @Binding?

El Binding en SwiftUI es un lazo bidireccional que conecta datos entre una vista y su vista contenedora. Permite que los cambios realizados en una subvista se reflejen automáticamente en la vista que la contiene, y viceversa.

Ejemplo Conceptual

struct ParentView: View {
    @State private var text: String = ""

    var body: some View {
        ChildView(text: $text) // Pasamos el Binding
    }
}

struct ChildView: View {
    @Binding var text: String // Recibimos el Binding

    var body: some View {
        TextField("Escribe algo...", text: $text)
    }
}

En este ejemplo:

ParentView tiene una propiedad @State llamada text.
La subvista ChildView utiliza un @Binding para sincronizarse con ParentView.

2. Refactorizando con NTextField

El formulario original tenía un TextField con un diseño definido directamente en la vista. Reutilizaremos ese mismo diseño en un nuevo componente llamado NTextField.

Formulario Original

En el formulario original, el TextField estaba diseñado así:

TextField("Título", text: $viewModel.title)
    .font(.headline)
    .padding()
    .background(Color.gray.opacity(0.1))
    .cornerRadius(8)

Este diseño será la base para nuestro componente reutilizable.

Creando NTextField

El componente NTextField encapsula el diseño y la funcionalidad del TextField original, permitiendo su reutilización en otras partes de la aplicación.

import SwiftUI

struct NTextField: View {
    let placeholder: String
    @Binding var text: String

    var body: some View {
        // Reutilizamos el diseño del formulario original
        TextField(placeholder, text: $text)
            .font(.headline)
            .padding()
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
    }
}

#Preview {
    VStack {
        NTextField(placeholder: "Escribe algo...", text: .constant("Texto inicial"))
        NTextField(placeholder: "Escribe algo más...", text: .constant(""))
    }
    .padding()
}

Ventajas del Componente Reutilizable

Consistencia:
- Asegura que todos los TextField sigan el mismo estilo.
Modularidad:
- Si el diseño cambia en el futuro, puedes actualizarlo desde un solo lugar.
Claridad:
- Reduce el código repetido en tus vistas.

3. Actualizando el Formulario con NTextField

Reemplazaremos el TextField en el formulario por el nuevo componente NTextField.

Formulario Original

TextField("Título", text: $viewModel.title)
    .font(.headline)
    .padding()
    .background(Color.gray.opacity(0.1))
    .cornerRadius(8)

Formulario Refactorizado

Usaremos el NTextField para simplificar el código:

NTextField(placeholder: "Título", text: $viewModel.title)

Formulario Completo

El formulario queda así después del refactor:

struct NCreateNoteView: View {
    @StateObject var viewModel: NCreateNoteViewModel = NCreateNoteViewModel()

    var onNoteCreated: ((NCard) -> Void)?

    func onTap() {
        let card = viewModel.createNote()
        print("Esta es tu nueva card: \\(card)")
        onNoteCreated?(card)
    }

    var body: some View {
        ScrollView {
            VStack {
                Text("Crear Nueva Nota")
                    .font(.largeTitle)
                    .bold()
                    .padding(.bottom, 10)

                // Usamos el componente reutilizable
                NTextField(placeholder: "Título", text: $viewModel.title)

                TextEditor(text: $viewModel.text)
                    .scrollContentBackground(.hidden)
                    .font(.body)
                    .frame(height: 150)
                    .padding()
                    .background(Color.gray.opacity(0.1))
                    .cornerRadius(8)

                HStack {
                    Text("Tamaño")
                    Spacer()
                    Picker("Tamaños", selection: $viewModel.size) {
                        Text("Pequeño").tag(NCardType.small)
                        Text("Mediano").tag(NCardType.medium)
                    }
                }
                .padding()

                Toggle("Marcar como favorito", isOn: $viewModel.isFavorite)
                    .padding()

                Button {
                    onTap()
                } label: {
                    Text("Guardar Nota")
                        .font(.headline)
                        .foregroundStyle(Color.white)
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(8)
                }
                .padding(.top, 20)
            }
        }
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .padding()
        .background(Color.cyan.opacity(0.2))
    }
}

#Preview {
    NCreateNoteView()
}

4. Reto: Crear NTextEditor

Usando los mismos conceptos, crea un componente reutilizable para el TextEditor llamado NTextEditor.

Ejemplo de NTextEditor

struct NTextEditor: View {
    @Binding var text: String

    var body: some View {
        TextEditor(text: $text)
            .scrollContentBackground(.hidden)
            .font(.body)
            .frame(height: 150)
            .padding()
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
    }
}

Reemplaza el TextEditor del formulario por:

NTextEditor(text: $viewModel.text)

5. Conclusión

En esta clase aprendiste:

Qué es y cómo funciona @Binding.
Cómo crear componentes reutilizables como NTextField.
Cómo refactorizar tu código para hacerlo más modular y consistente.

Tu reto:

Refactoriza el TextEditor usando @Binding y crea un componente llamado NTextEditor. Esto consolidará tus habilidades en el uso de @Binding y la creación de componentes reutilizables.

¡Compártelo en los comentarios para que otros estudiantes también puedan aprender de tus avances!

Creación de Componentes Reutilizables con @Binding en SwiftUI

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Creación de Componentes Reutilizables con @Binding en SwiftUI

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Todos los cursos GRATIS