ZStack
, VStack
, and HStack in SwiftUI
Dec 24, 2024
SwiftUI provides three primary stack types — ZStack
, VStack
, and HStack
—that help in laying out views. Here's a brief description of each:
1. ZStack
: Layered Layout
- Purpose: Overlays views on top of each other.
- Key Feature: Views are positioned along the Z-axis (depth).
- Use Case: Creating complex designs like a card stack, overlapping shapes, or custom backgrounds.
2. VStack
: Vertical Layout
- Purpose: Stacks views vertically, top to bottom.
- Key Feature: Automatically arranges views in a column.
- Use Case: Creating lists, forms, or vertically aligned sections.
3. HStack
: Horizontal Layout
- Purpose: Stacks views horizontally, left to right.
- Key Feature: Automatically arranges views in a row.
- Use Case: Building navigation bars, button groups, or inline controls.
4. CombinedStackExample
This view created by using ZStack
, VStack
, and HStack.