SwiftUI Academy · Aula

Linhas com HStack

Posicione visualizações lado a lado horizontalmente.

Linhas com HStack é uma aula grátis de SwiftUI 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 SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Going Horizontal

Sometimes views belong side by side, not stacked down. For that you reach for the horizontal sibling of VStack. ➡️

Meet HStack

An HStack arranges its children horizontally, left to right. It is perfect for rows like an icon next to a label.

Your First HStack

Put views inside the HStack braces and they line up across the screen in the order you wrote them.

HStack {
    Text("Left")
    Text("Right")
}

Left to Right Order

In an HStack the first child sits on the leading edge and later children follow toward the trailing edge. Code order is left-to-right order.

Icon Plus Label

A classic HStack pairs an Image with a Text so an icon and its caption stay on one line, like a row in a settings screen.

HStack {
    Image(systemName: "bell")
    Text("Alerts")
}

Centered Vertically

By default an HStack aligns its children to the vertical center, so a tall image and short text line up neatly along their middles.

HStack Hugs Its Content

Just like VStack, an HStack shrinks to fit its children rather than filling the whole width. It takes only the space it needs.

Combining HStack and VStack

Nest an HStack inside a VStack to build a card: a title row on top and a detail row below. Mixing both directions builds real layouts.

VStack {
    Text("Title")
    HStack {
        Text("A")
        Text("B")
    }
}

HStack Is a View

An HStack is a view too, so modifiers like padding or background apply to the entire row at once, treating it as a single block.

Mixed Content Rows

An HStack happily holds different view types together, like a number, a label, and a button all sharing one horizontal line.

HStack {
    Text("42")
    Button("Add") { }
}

When to Reach for HStack

Use an HStack whenever items read left to right: a label and value, a toolbar of buttons, or an avatar beside a name.

Quick Check

Let's confirm how HStack lays things out.

Recap: Horizontal Rows

Great progress! An HStack lines views up left to right, centers them vertically, and pairs beautifully with VStack to build cards and rows. 🙌

Perguntas Frequentes

A aula “Linhas com HStack” é grátis?

Sim — o texto completo de “Linhas com HStack” é 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 SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.

O que vou aprender em “Linhas com HStack”?

Posicione visualizações lado a lado horizontalmente. Você pratica SwiftUI 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 SwiftUI Academy?

Nenhuma experiência prévia é necessária. SwiftUI 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 “Linhas com HStack”?

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

Sim. Cada aula de SwiftUI 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

← Voltar para SwiftUI Academy