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

Comentarios4

JULIAN DAVID PINZON MOLINA

Estudiante

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)

}

Bryan Alexander Guapacha Florez

Estudiante

¿El archivo del componente NTextField donde debo crearlo? Es decir, ¿Dentro de que folder? o ¿Debo crear un folder llamado "Components" y crear el archivo SuiftUI ahí?

Bryan Alexander Guapacha Florez

Estudiante

Estuve investigamos un poco, estaba algo confundido. Segun lo que encontré que en la estrutura de los proyecto puede existir un folder llamado "Components" o "Views".

En este caso estamos utilizando Views, lo he creado ahí y funcionó correctamente.

Brian Chuquiruna

Estudiante

@Binding y @State son dos conceptos clave en SwiftUI, pero tienen propósitos diferentes:

@State: Se utiliza para declarar propiedades que son específicas de una vista. Cuando una propiedad marcada con @State cambia, la vista se vuelve a renderizar automáticamente. Es ideal para manejar datos internos de la vista.
@Binding: Se usa para crear una conexión bidireccional entre una vista y su vista contenedora. Permite que los cambios en una subvista se sincronicen con la vista principal. Se utiliza comúnmente para pasar datos entre vistas.

En resumen, @State maneja el estado interno de una vista, mientras que @Binding conecta y comparte el estado entre vistas.

Bryan Alexander Guapacha Florez

Estudiante

Comparto el codigo del componente NTextEditor:

import SwiftUI

struct NTextEditor: View {

@Binding var text: String

var body: some View {

// Tambien reutilizamos el deseño del formulario original

TextEditor(text: $text)

.scrollContentBackground(.hidden)

.font(.body)

.frame(height: 150)

.padding()

.background(Color.gray.opacity(0.1))

.cornerRadius(8)

}

#Preview {

VStack {

NTextEditor(text: .constant("Tener listo el proyecto para presentar mañana en la daily"))

}

.padding()

}

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)
    }
}

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()
}

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()
}

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)
    }
}

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