SwiftUI Tutorial

Introduction to SwiftUI Views & Modifiers State & Binding Stacks & Layout Lists & Navigation Forms & User Input Data Flow: ObservableObject & Environment Animations Networking & async/await in SwiftUI Combine Basics Building a Complete SwiftUI App

Stacks & Layout

June 02, 2026 • 1 min read

SwiftUI layout is built from stacks: VStack (vertical), HStack (horizontal) and ZStack (overlapping).

VStack(alignment: .leading, spacing: 12) {
    Text("Title").font(.title2)
    HStack {
        Image(systemName: "star.fill")
        Text("4.8 rating")
        Spacer()           // pushes content apart
        Text("\u{20B9}499")
    }
}
.padding()

Sizing

  • Spacer() expands to fill available space.
  • .frame(maxWidth: .infinity) makes a view fill its width.
  • .padding() adds breathing room.
Tip: Combine stacks freely — most complex screens are just nested VStacks and HStacks.

Summary

Compose layouts with VStack/HStack/ZStack, control spacing with Spacer and frames, and nest them for any design.