ZStack, VStack, and HStack in SwiftUI

Nitish Kumar
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.

Thanks, Happy coding :)

--

--

Nitish Kumar
Nitish Kumar

Written by Nitish Kumar

I developed and maintain applications aimed at a range of iOS devices including mobile phones and tablet computers.

No responses yet