SwiftUI Basics

By the end of this lesson you'll be able to build a real iOS screen by hand: describe it with a View , stack and style the pieces with modifiers, add a tappable button, and make the screen update itself with @State .

Learn SwiftUI Basics in our free Swift course — a beginner-friendly interactive lesson with worked examples, a practice exercise and a quick reference.

Part of the free Swift course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn in This Lesson

In the old imperative style you wrote every step: create a label, set its text, add it to the view, then later find that label and change it by hand each time the data moved. That's a lot of bookkeeping, and bugs creep in when the screen and the data drift out of sync.

SwiftUI is declarative : you write one body that says what the screen looks like for the current state . When the state changes, SwiftUI re-runs body and updates only what actually changed. You describe the what ; the framework handles the how .

1️⃣ Your First View: Text, Image & Modifiers

Everything you see in SwiftUI is a View — a lightweight struct that describes something on screen. Every view struct has a body that returns the content. You customise a view by chaining modifiers : methods like .font() , .foregroundColor() , and .padding() that each return a new, tweaked view. Read this worked example, then build it.

2️⃣ Layout with Stacks

You arrange views with three stacks. VStack lays children out top-to-bottom, HStack left-to-right, and ZStack layers them back-to-front. You nest stacks inside each other to build any layout — no manual constraints required. The spacing: argument controls the gap between children.

Your turn. The view below is almost finished — fill in the three blanks marked ___ using the hints, then preview it.

3️⃣ Buttons & @State : a Reactive Counter

A Button takes a title and an action — a closure (a block of code in {' '} ) that runs on tap. To make the screen respond , you store data in a property marked @State . A SwiftUI view is a struct that gets rebuilt constantly, so @State tells SwiftUI to keep that value safe between rebuilds and to re-run body automatically whenever it changes. That automatic refresh is what "reactive" means.

Now wire up your own state. Fill in the two blanks so the heart toggles between empty and filled each time the button is tapped:

📋 Quick Reference — SwiftUI

No blanks this time — just a brief and an outline. Build a small view that shows a number with a minus button on its left and a plus button on its right, where tapping each updates the number live. You'll combine a VStack , an HStack , two Button s, and one @State value.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary