Stacks: Laying Things Out

Three stacks, all of layout

One view per screen won't get you far. SwiftUI's layout system is built on three containers, each just a view that arranges its children:

  • VStack β€” stacks children vertically, top to bottom.
  • HStack β€” lines children up horizontally, left to right.
  • ZStack β€” layers children on top of each other, back to front (first child is at the back).

You compose them by nesting: a screen is a VStack of rows, each row an HStack of an icon and some text. PawWalk's whole Home screen is stacks inside stacks.

Both VStack and HStack take two optional parameters: alignment (how children line up on the cross axis β€” e.g. .leading for left-aligned in a VStack) and spacing (the gap between children, in points).