Crear una fila Toggle reutilizable
Cree una vista secundaria que modifique el estado de la vista principal.
Crear una fila Toggle reutilizable es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
A Component That Edits
Lets build a reusable row that flips a setting. The trick: the row mutates the parents state through a @Binding. 🧩
Design the Inputs
The row needs a label to show and a binding to change. So it takes a title string and a Bool binding.
Declare the Child View
Create a struct with a plain title and a binding for the value it will toggle on and off.
struct ToggleRow: View {
let title: String
@Binding var isOn: Bool
var body: some View { Text("Placeholder") }
}Build the Body
Inside the body, a single Toggle shows the title and writes through the binding when tapped.
var body: some View {
Toggle(title, isOn: $isOn)
.padding()
}Use It in a Parent
The parent owns the setting with @State, then drops the row in and passes the value with a dollar sign.
struct SettingsView: View {
@State private var notify = true
var body: some View { ToggleRow(title: "Notify", isOn: $notify) }
}Reuse It Everywhere
Now add ten settings with ten rows, each bound to its own state. One small view, reused across the whole screen.
ToggleRow(title: "Sound", isOn: $sound)
ToggleRow(title: "Vibrate", isOn: $vibrate)Parent Sees Every Change
Flip any row and the parents matching @State updates instantly. The parent can react to the new value right away.
Text(notify ? "On" : "Off")
.foregroundStyle(notify ? .green : .gray)Keep the Child Dumb
The row holds no opinions about where data lives. It just edits the binding it was given, which makes it portable.
Add a Little Style
Because the row is one view, you can style it once and every instance looks the same. Consistency comes for free. 💅
Toggle(title, isOn: $isOn)
.tint(.orange)
.font(.headline)Swap the Type Later
Want a row for a number instead? Change the binding type and the same pattern works for any editable value.
Small Pieces, Big Apps
Reusable binding-driven rows are how real apps stay tidy. Compose many tiny editors into one clean settings screen.
Quick Check
Quick check on the toggle row.
Recap: A Reusable Editor
A child view with a @Binding becomes a reusable editor. Pass state in with the dollar sign and drop it in anywhere. 🎉
Preguntas frecuentes
¿La lección «Crear una fila Toggle reutilizable» es gratis?
Sí — el texto completo de «Crear una fila Toggle reutilizable» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Crear una fila Toggle reutilizable»?
Cree una vista secundaria que modifique el estado de la vista principal. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar SwiftUI Academy?
No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Crear una fila Toggle reutilizable»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?
Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué los elementos secundarios necesitan @Binding
- Pasar un Binding hacia abajo
- Crear una fila Toggle reutilizable
- @State frente a @Binding