0Pricing
Swift Academy · Aula

LazyVGrid e LazyHGrid

Crie layouts de grade responsivos com colunas GridItem fixas, flexíveis e adaptáveis.

LazyVGrid e LazyHGrid é uma aula grátis de Swift Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Swift Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Swift Academy inclui 4 aulas no total.

Boas-vindas

`LazyVGrid` e `LazyHGrid` fornecem layouts de grade com definições personalizáveis de colunas ou linhas usando `GridItem`. São perfeitos para galerias, catálogos e layouts de cartões.

Tipos de GridItem

• `.fixed(size)` — tamanho fixo em pixels • `.flexible(min:max:)` — preenche o espaço disponível • `.adaptive(minimum:maximum:)` — cria quantas colunas couberem

LazyVGrid básico

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

Colunas fixas

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

Tipos mistos de GridItem

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` Combine os tipos para criar layouts no estilo do 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) } } } ```

alinhamento e espaçamento

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

Cabeçalhos de seção na grade

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

Decisão entre adaptável e fixa

• `.adaptive` — ideal para grades de fotos e conteúdo dinâmico • `.fixed` — quando é necessário controle exato • `.flexible` — preenche uniformemente, como uma coluna de caixa flexível do CSS

Desempenho do carregamento tardio

O prefixo `Lazy` significa que apenas as células visíveis são renderizadas — algo fundamental para listas longas. Sem o carregamento tardio, todos os itens são criados antecipadamente.

Verificação rápida

Que tipo de `GridItem` cria o maior número possível de colunas que caibam em uma largura mínima?

Recapitulação

Principais conclusões: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` para disposições em grade • `GridItem(.fixed)`, `.flexible()`, `.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` para cabeçalhos fixos • Carregamento tardio = somente as células visíveis são renderizadas • `.adaptive` é a opção mais fácil para grades adaptáveis Próximo: Spacer, preenchimento e dimensionamento.

Perguntas Frequentes

A aula “LazyVGrid e LazyHGrid” é grátis?

Sim — o texto completo de “LazyVGrid e LazyHGrid” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Swift Academy, atualize para CoddyKit PRO. O curso de Swift Academy inclui 4 aulas no total.

O que vou aprender em “LazyVGrid e LazyHGrid”?

Crie layouts de grade responsivos com colunas GridItem fixas, flexíveis e adaptáveis. Você pratica Swift Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Swift Academy?

Nenhuma experiência prévia é necessária. Swift Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “LazyVGrid e LazyHGrid”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Swift Academy?

Sim. Cada aula de Swift Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Fundamentos de VStack, HStack e ZStack
  2. LazyVGrid e LazyHGrid
  3. Modificadores Spacer, Padding e Frame
  4. GeometryReader para layouts adaptáveis
← Voltar para Swift Academy