Lesson 6 • Intermediate
SwiftUI Basics 📱
Build your first iOS screen using Apple's declarative UI framework. Learn views, modifiers, layout stacks, and state management to create beautiful, reactive interfaces.
What You'll Learn in This Lesson
- • Core SwiftUI views: Text, Image, Button, TextField, Toggle
- • View modifiers and chaining
- • Layout with VStack, HStack, ZStack, and Spacer
- • State management:
@State,@Binding,@StateObject - • NavigationStack and List for building real app screens
1️⃣ Views and Modifiers
Everything in SwiftUI is a View. Views are lightweight structs that describe what to display. You customize them by chaining modifiers like .font(), .padding(), and .foregroundColor().
Try It: Views & Modifiers
Explore core SwiftUI views and modifier chaining
// SwiftUI — Declarative UI Framework
console.log("=== What is SwiftUI? ===");
console.log("SwiftUI is Apple's declarative UI framework (introduced 2019).");
console.log("Instead of TELLING the UI what to do step by step,");
console.log("you DESCRIBE what the UI should look like.");
console.log();
// Simulating SwiftUI view hierarchy
console.log("=== Your First SwiftUI View ===");
console.log();
console.log("struct ContentView: View {");
console.log(" var body: some View {");
console.log('
...2️⃣ Layout with Stacks
SwiftUI uses three stack types for layout: VStack (vertical), HStack (horizontal), and ZStack (layered). Combined with Spacer() and padding(), you can build any layout without constraints.
Try It: Layout Stacks
VStack, HStack, ZStack, and building a complete profile screen
// SwiftUI Layout — Stacks, Spacing, and Alignment
console.log("=== Layout Containers ===");
console.log();
// VStack — vertical
console.log("📐 VStack (vertical stack):");
console.log(" VStack(alignment: .leading, spacing: 10) {");
console.log(' Text("Title")');
console.log(' Text("Subtitle")');
console.log(' Text("Body text")');
console.log(" }");
console.log(" → Items stacked top to bottom");
console.log();
// HStack — horizontal
console.log("📐 HStack (horizontal stack):"
...3️⃣ State Management
SwiftUI is reactive — when state changes, the UI automatically updates. @State is for local view state, @Binding shares state between parent and child, and @StateObject/@ObservedObject manage external data models.
Try It: State Management
@State, @Binding, @StateObject, and NavigationStack
// SwiftUI State Management
console.log("=== @State — Local View State ===");
console.log();
// Simulating @State
console.log("struct CounterView: View {");
console.log(" @State private var count = 0");
console.log();
console.log(" var body: some View {");
console.log(" VStack(spacing: 20) {");
console.log(' Text("Count: \\(count)")');
console.log(" .font(.largeTitle)");
console.log();
console.log(' Button("Increment") {');
console.log("
...⚠️ Common Mistakes
@StateObject creates and owns the object; @ObservedObject only observes it. Using the wrong one causes data loss on re-renders..background(.blue).padding() vs .padding().background(.blue) produce very different results.📋 Quick Reference — SwiftUI
| Component | Usage |
|---|---|
| Text | Text("Hello").font(.title) |
| Button | Button("Tap") { action() } |
| VStack | VStack { Text("A"); Text("B") } |
| @State | @State private var count = 0 |
| @Binding | @Binding var isOn: Bool |
| NavigationStack | NavigationStack { List { ... } } |
🎉 Lesson Complete!
You've learned the foundations of SwiftUI! Next, learn how to fetch data from APIs and display it in your app.
Sign up for free to track which lessons you've completed and get learning reminders.