Layout: Stacks, Frames & GeometryReader

SwiftUI lays out screens with simple, composable containers. You'll arrange views with VStack , HStack , and ZStack , control gaps and alignment, size views with .frame , and reach for GeometryReader when you need to lay out relative to the available space.

Learn Layout: Stacks, Frames & GeometryReader in our free Swift course — a beginner-friendly interactive lesson with worked examples, a practice exercise and…

Part of the free Swift course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Building iOS Apps with SwiftUI • Intermediate

What You'll Learn in This Lesson

1️⃣ Stacks — VStack, HStack, ZStack

The three containers cover every direction: VStack goes top-to-bottom, HStack goes left-to-right, and ZStack layers views back-to-front so they overlap. Nest them freely to build any arrangement.

2️⃣ Spacing, Alignment & Spacer

spacing sets the gap between children; alignment lines them up across the other axis. A Spacer expands to fill free space, which is the simplest way to push views to opposite ends.

3️⃣ Sizing with .frame

Use .frame to propose a size. Fixed numbers pin exact dimensions; maxWidth: .infinity lets a view grow to fill the available width — handy for full-width buttons and rows.

4️⃣ GeometryReader — Layout Relative to Space

When you need a view sized relative to what's available — say, half the parent's width — wrap it in a GeometryReader . It hands you a geometry proxy whose size tells you the proposed width and height. Use it sparingly: it claims all the space offered to it.

Your turn. Fill in the blanks to build a row with an icon, a left-aligned two-line label, and a trailing spacer.

Build a header where a circular avatar (an SF Symbol) sits on the left and, to its right, a left-aligned VStack shows a name in a large bold font above a handle. Put a Spacer after the text so the whole row stretches full width, and give the row some .padding() . Bonus: use a GeometryReader to make a progress bar exactly 80% of the available width.

Practice quiz

What does a VStack do?

  • Arranges children top to bottom (vertically)
  • Arranges children left to right
  • Overlaps children
  • Hides children

Answer: Arranges children top to bottom (vertically). VStack stacks its child views vertically, one above the next.

What does an HStack do?

  • Arranges children vertically
  • Arranges children horizontally (left to right)
  • Stacks them back to front
  • Scrolls children

Answer: Arranges children horizontally (left to right). HStack arranges its child views horizontally in a row.

What does a ZStack do?

  • Arranges children in a row
  • Layers children back-to-front, overlapping them
  • Sorts children by size
  • Spaces children evenly

Answer: Layers children back-to-front, overlapping them. ZStack overlays its children on top of one another along the z-axis.

How do you set the gap between items in a VStack?

  • VStack(gap: 8)
  • VStack(spacing: 8)
  • VStack(padding: 8)
  • VStack(margin: 8)

Answer: VStack(spacing: 8). Pass the spacing parameter, e.g. VStack(spacing: 8), to control the gap between children.

What does the .frame(width:height:) modifier do?

  • Adds a border
  • Proposes a size for a view
  • Changes the font
  • Hides the view

Answer: Proposes a size for a view. .frame proposes a specific size (or sizing constraints) for the view it modifies.

How do you make a view expand to fill available width?

  • .fill()
  • .expand()
  • .frame(maxWidth: .infinity)
  • .stretch()

Answer: .frame(maxWidth: .infinity). .frame(maxWidth: .infinity) lets the view grow to take all available horizontal space.

What does the alignment parameter of a VStack control?

  • The spacing
  • How children line up along the horizontal axis (leading/center/trailing)
  • The background color
  • The animation speed

Answer: How children line up along the horizontal axis (leading/center/trailing). In a VStack, alignment sets the horizontal alignment of children, e.g. .leading or .trailing.

What is GeometryReader used for?

  • Reading files
  • Reading the size and coordinate space proposed to a view
  • Drawing shapes only
  • Networking

Answer: Reading the size and coordinate space proposed to a view. GeometryReader gives you a GeometryProxy with the proposed size and frame so you can lay out relative to it.

Inside GeometryReader, what does geometry.size.width give you?

  • The screen brightness
  • The width available to that GeometryReader
  • The font size
  • A random number

Answer: The width available to that GeometryReader. The GeometryProxy's size reports the width and height proposed to the GeometryReader.

A Spacer inside an HStack does what?

  • Adds a fixed 10pt gap
  • Removes spacing
  • Adds a border
  • Expands to push views apart, filling free space

Answer: Expands to push views apart, filling free space. Spacer is a flexible view that expands to fill available space, pushing siblings apart.