0Pricing
Swift Academy · Lección

LazyVGrid y LazyHGrid

Construya diseños de cuadrícula adaptables con columnas GridItem fijas, flexibles y adaptativas.

LazyVGrid y LazyHGrid es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 2 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

`LazyVGrid` y `LazyHGrid` ofrecen diseños de cuadrícula con definiciones personalizables de columnas o filas mediante `GridItem`. Son perfectos para galerías, catálogos y diseños basados en tarjetas.

Tipos de GridItem

• `.fixed(size)`: tamaño fijo en píxeles • `.flexible(min:max:)`: ocupa el espacio disponible • `.adaptive(minimum:maximum:)`: tantas columnas como quepan

LazyVGrid básica

```swift let columns = [GridItem(.adaptive(minimum: 100))] LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } ```

Columnas fijas

```swift let cols = Array(repeating: GridItem(.fixed(120)), count: 3) LazyVGrid(columns: cols) { ForEach(0..<12) { i in Color.blue.frame(height:80) } } ```

Tipos de GridItem combinados

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` Combine tipos para crear diseños al estilo de Pinterest.

LazyHGrid

```swift let rows = [GridItem(.fixed(60)), GridItem(.fixed(60))] ScrollView(.horizontal) { LazyHGrid(rows: rows, spacing: 8) { ForEach(tags) { tag in TagView(tag: tag) } } } ```

alineación y espaciado

```swift LazyVGrid(columns: columns, alignment: .leading, spacing: 12) { ... } ```

Encabezados de sección en una cuadrícula

```swift LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) { Section(header: Text("Section 1").font(.headline)) { ForEach(items1) { ItemView($0) } } } ```

Decisión entre adaptive y fixed

• `.adaptive` — ideal para cuadrículas de fotos y contenido dinámico • `.fixed` — cuando se necesita un control exacto • `.flexible` — se distribuye de manera uniforme, como una columna de CSS flexbox

Rendimiento de la carga diferida

El prefijo `Lazy` significa que solo se representan las celdas visibles, algo fundamental para las listas largas. Sin `Lazy`, todos los elementos se crean de antemano.

Comprobación rápida

¿Qué tipo de `GridItem` crea tantas columnas como quepan con un ancho mínimo?

Resumen

Puntos clave: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` para crear diseños de cuadrícula • `GridItem(.fixed)`, `.flexible()`, `.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` para encabezados fijos • `Lazy` = solo se representan las celdas visibles • `.adaptive` es la opción más sencilla para crear cuadrículas adaptables Siguiente: Spacer, padding y frame.

Preguntas frecuentes

¿La lección «LazyVGrid y LazyHGrid» es gratis?

Sí — el texto completo de «LazyVGrid y LazyHGrid» 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 «LazyVGrid y LazyHGrid»?

Construya diseños de cuadrícula adaptables con columnas GridItem fijas, flexibles y adaptativas. 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 2 de 4.

¿Cuánto tiempo toma la lección «LazyVGrid y LazyHGrid»?

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