0Pricing
Swift Academy · Lección

Fundamentos de VStack, HStack y ZStack

Apile vistas verticalmente, horizontalmente y en profundidad, con espaciado y alineación.

Fundamentos de VStack, HStack y ZStack es una lección gratuita de Swift 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 Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.

Bienvenida

`VStack`, `HStack` y `ZStack` son los tres contenedores de diseño fundamentales de SwiftUI. Comprenderlos es esencial para crear cualquier interfaz.

VStack: vertical

```swift VStack(alignment: .leading, spacing: 8) { Text("Title").font(.title) Text("Subtitle").foregroundColor(.secondary) Button("Action") {} } ```

HStack: horizontal

```swift HStack(spacing: 16) { Image(systemName: "star") Text("Favourite") Spacer() Text("4.9") } ```

ZStack: profundidad

```swift ZStack(alignment: .bottomTrailing) { Image("background") Text("Overlay") .padding() .background(Color.black.opacity(0.5)) } ```

Opciones de alineación

Alineación de VStack: `.leading`, `.center`, `.trailing` Alineación de HStack: `.top`, `.center`, `.bottom`, `.firstTextBaseline` Alineación de ZStack: cualquier `Alignment` que combine horizontal y vertical

Parámetro de espaciado

```swift VStack(spacing: 0) { // no space between views Divider() Text("A") Divider() Text("B") } ```

Anidar stacks

```swift VStack { HStack { Image("icon"); Text("Name") } Text("Description") } ``` Los stacks se pueden anidar arbitrariamente para conseguir cualquier diseño.

Spacer

```swift HStack { Text("Left") Spacer() // pushes views to edges Text("Right") } ```

Divider

```swift VStack { Text("Above") Divider() // horizontal line Text("Below") } ```

Rendimiento: Group frente a Stack

Para más de 10 vistas secundarias, envuélvalas en `Group` o cambie a `LazyVStack` para evitar los límites del árbol de vistas: ```swift ScrollView { LazyVStack { ForEach(items) { Text($0.name) } } } ```

Comprobación rápida

¿Qué stack coloca las vistas a lo largo del eje de profundidad, de delante hacia atrás?

Repaso

Ideas clave: • `VStack`: vertical; `HStack`: horizontal; `ZStack`: profundidad • Use los parámetros `alignment:` y `spacing:` • `Spacer()` empuja las vistas adyacentes hacia los bordes • Anide stacks para crear diseños complejos • Use `LazyVStack`/`LazyHStack` para listas grandes Siguiente: LazyVGrid y LazyHGrid.

Preguntas frecuentes

¿La lección «Fundamentos de VStack, HStack y ZStack» es gratis?

Sí — el texto completo de «Fundamentos de VStack, HStack y ZStack» 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 Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Fundamentos de VStack, HStack y ZStack»?

Apile vistas verticalmente, horizontalmente y en profundidad, con espaciado y alineación. Practicas Swift 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 Swift Academy?

No se requiere experiencia previa. Swift 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 «Fundamentos de VStack, HStack y ZStack»?

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 Swift Academy?

Sí. Cada lección de Swift 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

  1. Fundamentos de VStack, HStack y ZStack
  2. LazyVGrid y LazyHGrid
  3. Modificadores Spacer, Padding y Frame
  4. GeometryReader para diseños adaptables
← Volver a Swift Academy