Stacks, spacers, and alignment

Stacks, spacers, and alignment

HStack, VStack and ZStack arrange their children in a row, in a column, and back to front. Each takes an alignment (how children line up across the other axis) and a spacing (the gap between them). A Spacer takes up whatever room is left over, pushing its neighbours apart. A stack is only as large as its content needs, unless something inside it is flexible.

This replaces Auto Layout for most screens. Instead of writing constraints between views, you nest stacks. LazyVStack and LazyHStack create their children only as they scroll into view; use them inside a ScrollView when the content is long.

Recreate a boarding pass or a shop receipt using only stacks, spacers and padding. Use no fixed frames, apart from one for an icon.

1. What is the difference between a stack's alignment and its spacing?
2. How does a Spacer decide how much room to take?
3. When should you use LazyVStack instead of VStack?

• Building layouts with stack views
• Layout fundamentals