0Pricing
Swift Academy · Aula

Fundamentos de VStack, HStack e ZStack

Empilhe views verticalmente, horizontalmente e em profundidade, usando espaçamento e alinhamento.

Fundamentos de VStack, HStack e ZStack é uma aula grátis de Swift Academy no CoddyKit. Esta é a aula 1 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

`VStack`, `HStack` e `ZStack` são os três contêineres fundamentais de layout no SwiftUI. Entendê-los é essencial para criar qualquer interface.

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 — profundidade

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

Opções de alinhamento

Alinhamento de VStack: `.leading`, `.center`, `.trailing` Alinhamento de HStack: `.top`, `.center`, `.bottom`, `.firstTextBaseline` Alinhamento de ZStack: qualquer `Alignment` que combine os eixos horizontal e vertical

Parâmetro de espaçamento

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

Aninhando contêineres

```swift VStack { HStack { Image("icon"); Text("Name") } Text("Description") } ``` Os contêineres podem ser aninhados livremente para obter qualquer layout.

Spacer

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

Divider

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

Desempenho: Group versus Stack

Para mais de 10 elementos filhos, envolva-os em `Group` ou alterne para `LazyVStack` para evitar limites na árvore de elementos visuais: ```swift ScrollView { LazyVStack { ForEach(items) { Text($0.name) } } } ```

Verificação rápida

Qual contêiner posiciona os elementos visuais ao longo do eixo de profundidade, da frente para trás?

Recapitulação

Principais conclusões: • `VStack` — vertical; `HStack` — horizontal; `ZStack` — profundidade • Use os parâmetros `alignment:` e `spacing:` • `Spacer()` empurra os elementos vizinhos para as bordas • Aninhe contêineres para criar layouts complexos • Use `LazyVStack`/`LazyHStack` para listas grandes A seguir: LazyVGrid e LazyHGrid.

Perguntas Frequentes

A aula “Fundamentos de VStack, HStack e ZStack” é grátis?

Sim — o texto completo de “Fundamentos de VStack, HStack e ZStack” é 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 “Fundamentos de VStack, HStack e ZStack”?

Empilhe views verticalmente, horizontalmente e em profundidade, usando espaçamento e alinhamento. 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 1 de 4.

Quanto tempo leva a aula “Fundamentos de VStack, HStack e ZStack”?

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