SwiftUI Academy · Lezione

Righe con HStack

Disporre le view affiancate orizzontalmente.

Righe con HStack è una lezione SwiftUI Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento SwiftUI Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso SwiftUI Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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. 🙌

Domande Frequenti

La lezione «Righe con HStack» è gratuita?

Sì — il testo completo di «Righe con HStack» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso SwiftUI Academy, passa a CoddyKit PRO. Il corso SwiftUI Academy include 4 lezioni in totale.

Cosa imparerò in «Righe con HStack»?

Disporre le view affiancate orizzontalmente. Eserciti SwiftUI Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare SwiftUI Academy?

Non è richiesta alcuna esperienza precedente. SwiftUI Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Righe con HStack»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione SwiftUI Academy?

Sì. Ogni lezione SwiftUI Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a SwiftUI Academy