SwiftUI Academy · Lección

Extraer vistas reutilizables

Convierta la interfaz en subvistas componibles.

Extraer vistas reutilizables es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 1 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.

Why Extract Views?

When a view body grows long and repetitive, it gets hard to read. Pulling pieces into their own views makes code clearer through extraction. 🧩

A View Is Just a Struct

Every SwiftUI view is a small struct conforming to View. Making a new reusable view is as simple as writing another struct.

struct AvatarView: View {
    var body: some View { Image("me") }
}

Move a Chunk Out

Spot a self-contained block in your body and lift it into its own view. The parent body shrinks and the intent reads at a glance.

Pass Data with Properties

A reusable view takes inputs as plain stored properties. The parent supplies values when it creates the child.

struct Badge: View {
    let count: Int
    var body: some View { Text("\(count)") }
}

Reuse It Everywhere

Once extracted, you can drop the same view in many places with different data. One definition, many uses.

Badge(count: 3)
Badge(count: 12)

Default Values Help

Give a property a default so callers can skip it. Common cases stay short while special cases still customize.

struct Tag: View {
    var color: Color = .blue
    var body: some View { Capsule().fill(color) }
}

Keep Views Focused

A good reusable view does one thing. If it juggles many jobs, split it again into smaller, clearer pieces.

Name Views by Role

Name a view for what it represents, like ProfileHeader or PriceTag. A clear name tells readers exactly when to reach for it.

Previews Per View

Each extracted view can have its own preview. You see it in isolation and iterate on it without running the whole app.

#Preview {
    Badge(count: 5)
}

Smaller Bodies, Faster Edits

Short bodies are easier for the compiler and for you. Extraction trims giant bodies into a tidy composition of named parts.

Compose, Do Not Repeat

Instead of copy-pasting UI, build small views and compose them. Fix a bug once and every screen using it improves.

Quick Check

Quick check on extracting views.

Recap: Lift and Reuse

Pull repeated UI into focused structs with properties for data. You get shorter bodies, clearer names, and UI you fix in one place. 🧠

Preguntas frecuentes

¿La lección «Extraer vistas reutilizables» es gratis?

Sí — el texto completo de «Extraer vistas reutilizables» 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 «Extraer vistas reutilizables»?

Convierta la interfaz en subvistas componibles. 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 1 de 4.

¿Cuánto tiempo toma la lección «Extraer vistas reutilizables»?

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

← Volver a SwiftUI Academy