HStack: o que é, HStack VStack ZStack no SwiftUI

O que é HStack no SwiftUI?

HStack (Horizontal Stack) é um container SwiftUI que organiza views filhas em uma linha horizontal. Cada elemento filho ocupa o espaço que precisa, a menos que especificado de outra forma. HStack aceita dois parâmetros obrigatórios: alignment (alinhamento vertical, padrão .center) e spacing (distância entre elementos, padrão nil — espaçamento do sistema). De acordo com Apple Human Interface Guidelines (2025), HStack é a escolha preferida para barras de botões, linhas de entrada e listas horizontais de ícones.

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("Favoritos")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

Neste exemplo, HStack cria uma linha de três elementos: um ícone, texto e uma seta. Spacer() separa os elementos — o ícone e o texto ficam alinhados à borda esquerda, e a seta à borda direita. Alignment .center alinha os três elementos ao longo do eixo central vertical.

VStack: layout vertical e alinhamento

VStack (Vertical Stack) é um container SwiftUI para organizar elementos filhos verticalmente de cima para baixo. Similar ao HStack, aceita alignment (alinhamento horizontal: .leading, .center, .trailing) e spacing. VStack é a base para construir formulários, cartões, perfis e listas de configurações. De acordo com Apple Docs (2025), VStack em par com LazyVStack cobre 85% dos cenários de layout vertical no SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Nome da receita")
        .font(.headline)
    Text("Tempo de preparo: 30 min")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack com alignment .leading alinha todas as linhas à borda esquerda. Dentro do VStack, um HStack é aninhado para a classificação — este é um padrão típico para construir layouts complexos através de stacks aninhados. Spacing 8 cria um espaçamento uniforme entre as linhas de texto.

ZStack: sobreposição de elementos por profundidade

ZStack (Z-axis Stack) é um container SwiftUI para sobrepor views filhas umas sobre as outras ao longo do eixo de profundidade. O primeiro elemento no corpo do ZStack é desenhado no fundo, o último — no primeiro plano. ZStack é usado para imagens de fundo com texto sobreposto, indicadores personalizados, botões de sobreposição e animações de transição. De acordo com Apple Docs (2025), ZStack por padrão alinha todos os elementos ao centro (alignment: .center), mas suporta qualquer combinação de Alignment.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("Paisagem montanhosa")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

Neste exemplo, ZStack sobrepõe três camadas: uma imagem de montanha, uma cor preta semitransparente para escurecimento e um texto de título. Alignment .bottomLeading fixa o texto no canto inferior esquerdo. O escurecimento (Color.black.opacity(0.3)) melhora a legibilidade do texto em áreas claras da imagem.

HStack vs VStack vs ZStack: quando usar cada um

A escolha do stack depende da direção do layout: HStack — disposição horizontal (botões, linhas de entrada), VStack — disposição vertical (formulários, cartões), ZStack — sobreposição (fundos, overlays). De acordo com Apple Human Interface Guidelines (2025), para layouts complexos os stacks são aninhados uns dentro dos outros: um VStack externo contém HStack e ZStack internamente. LazyHStack e LazyVStack são versões lazy para coleções grandes.

Alignment e Spacing: ajuste fino de stacks

Os parâmetros alignment e spacing dão controle total sobre o posicionamento dos elementos filhos nos stacks do SwiftUI. Alignment no HStack controla o alinhamento vertical de elementos com diferentes alturas. VStack alignment controla o alinhamento horizontal. Spacing define a distância entre todos os elementos filhos no stack. De acordo com SwiftUI Lab (2025), alignment pode ser padrão (.top, .center, .bottom) ou personalizado através de AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Título")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Subtítulo")
        Text("Descrição com texto adicional")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Aqui, alignment .top alinha o título grande e o VStack aninhado ao longo da borda superior. Spacing 12 cria um espaçamento entre eles. O VStack aninhado com alignment .leading alinha o subtítulo e a descrição à borda esquerda. A combinação de diferentes alignments dentro de stacks aninhados permite controle preciso do layout.

Stacks aninhados: exemplos de layouts complexos

Interfaces reais são construídas combinando HStack, VStack e ZStack aninhados. Um cartão de produto é um exemplo típico: um VStack externo contém uma imagem (ZStack com overlay), um título (Text), uma classificação (HStack) e um preço. De acordo com Apple Sample Projects (2025), a profundidade de aninhamento dos stacks raramente excede 4 níveis — aninhamento mais profundo reduz a legibilidade do código e o desempenho.

VStack(spacing: 12) {
    ZStack(alignment: .topTrailing) {
        Image("product")
            .resizable()
            .scaledToFit()
        Text("-20%")
            .font(.caption)
            .bold()
            .foregroundColor(.white)
            .padding(6)
            .background(Color.red)
            .cornerRadius(4)
    }
    Text("Smartphone Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

Neste exemplo, VStack combina um ZStack (imagem com um badge de desconto), um nome de produto e um HStack (preço + classificação). ZStack usa alignment .topTrailing para colocar o badge «-20%» no canto superior direito. Spacer no HStack empurra o preço para a borda esquerda e a classificação para a borda direita.