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{ @Stateprivatevartext:String=""varbody: some View{ChildView(text: $text)// Pasamos el Binding}}struct ChildView:View{ @Bindingvartext:String// Recibimos el Bindingvarbody: 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í:
struct NCreateNoteView:View{ @StateObjectvarviewModel:NCreateNoteViewModel=NCreateNoteViewModel()varonNoteCreated:((NCard)->Void)? func onTap(){let card = viewModel.createNote()print("Esta es tu nueva card: \\(card)") onNoteCreated?(card)}varbody: some View{ScrollView{VStack{Text("Crear Nueva Nota").font(.largeTitle).bold().padding(.bottom,10)// Usamos el componente reutilizableNTextField(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{ @Bindingvartext:Stringvarbody: 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!
¿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í?
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.
@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.
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"))
