0Pricing
Swift Academy · Lesson

VStack, HStack and ZStack Fundamentals

Stacking views vertically, horizontally and depth-wise with spacing and alignment.

VStack, HStack and ZStack Fundamentals is a free Swift Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Swift Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

`VStack`, `HStack`, and `ZStack` are the three fundamental layout containers in SwiftUI. Understanding them is essential for building any 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 — Depth

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

Alignment Options

VStack alignment: `.leading`, `.center`, `.trailing` HStack alignment: `.top`, `.center`, `.bottom`, `.firstTextBaseline` ZStack alignment: any `Alignment` combining horizontal+vertical

Spacing Parameter

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

Nesting Stacks

```swift VStack { HStack { Image("icon"); Text("Name") } Text("Description") } ``` Stacks can be arbitrarily nested to achieve any layout.

Spacer

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

Divider

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

Performance: Group vs Stack

For more than 10 children, wrap in `Group` or switch to `LazyVStack` to avoid view tree limits: ```swift ScrollView { LazyVStack { ForEach(items) { Text($0.name) } } } ```

Quick Check

Which stack places views along the depth axis (front-to-back)?

Recap

Key takeaways: • `VStack` — vertical; `HStack` — horizontal; `ZStack` — depth • Use `alignment:` and `spacing:` parameters • `Spacer()` pushes neighbours to edges • Nest stacks for complex layouts • Use `LazyVStack`/`LazyHStack` for large lists Next: LazyVGrid and LazyHGrid.

Frequently asked questions

Is the “VStack, HStack and ZStack Fundamentals” lesson free?

Yes — the full text of “VStack, HStack and ZStack Fundamentals” is free to read here on the web, and the Swift Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Swift Academy course, upgrade to CoddyKit PRO.

What will I learn in “VStack, HStack and ZStack Fundamentals”?

Stacking views vertically, horizontally and depth-wise with spacing and alignment. You practise Swift Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Swift Academy?

No prior experience is required. Swift Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “VStack, HStack and ZStack Fundamentals” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Swift Academy lesson?

Yes. Every Swift Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. VStack, HStack and ZStack Fundamentals
  2. LazyVGrid and LazyHGrid
  3. Spacer, Padding and Frame Modifiers
  4. GeometryReader for Adaptive Layouts
← Back to Swift Academy