SwiftUI Views & the body Property
SwiftUI builds every screen from views : small value types that describe what the UI should look like. In this lesson you'll meet the View protocol, its body property, the core views Text , Image , and Button , and how to compose them into rich layouts.
Learn SwiftUI Views & the body Property in our free Swift course — a beginner-friendly interactive lesson with worked examples, a practice exercise and a…
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.
Building iOS Apps with SwiftUI • Intermediate
What You'll Learn in This Lesson
- • Conform a type to the View protocol
- • Provide a body that returns some View
- • Use core views: Text , Image , Button
- • Compose small views into bigger ones
- • Style views by chaining modifiers
1️⃣ The View Protocol & body
A SwiftUI view is any type that conforms to the View protocol. The protocol has exactly one requirement: a computed property called body that returns some View . The some keyword is an opaque type — it means "one specific view, whose exact type you don't need to spell out".
2️⃣ Composition — Building Big Views from Small Ones
You rarely build a screen as one view. Instead you compose : nest Text , Image , and Button inside container views like VStack , and extract reusable chunks into their own View structs. Each piece stays small, focused, and reusable.
3️⃣ Modifiers — Styling Views
A modifier is a method like .font() or .padding() that returns a new view wrapping the original with the change applied. You chain them. Order matters: each modifier acts on the result of the one before it.
Your turn. Fill in the blanks to declare a proper view and show a star above a welcome message.
Pro Tips
- 💡 Extract reusable views. When a chunk of body grows, pull it into its own View struct.
- 💡 Use the Preview canvas. Xcode's live preview updates as you type — no need to rebuild the whole app.
- 💡 Modifier order matters. .padding().background() differs from .background().padding() .
Common Errors (and the fix)
- "Type 'MyView' does not conform to protocol 'View'" — you forgot the body property, or it doesn't return a view. Add var body: some View { … } .
- "Cannot find 'Text' in scope" — you didn't import SwiftUI at the top of the file.
- Image shows nothing — for SF Symbols use Image(systemName:) ; for your own assets use Image("assetName") .
Frequently Asked Questions
Mini-Challenge: Business Card
Build a BusinessCardView that stacks a profile SF Symbol, a name in a large bold font, a job title, and a tappable "Email me" button. Style it with at least two modifiers. Extract the whole card into its own View struct and use it inside a screen view.
🎉 Lesson Complete!
- ✅ A view conforms to the View protocol and provides a body
- ✅ body returns some View , an opaque type
- ✅ Core views: Text , Image , Button
- ✅ Build screens by composing and styling with modifiers
- ✅ Next lesson: @State & @Binding — make views interactive
Practice quiz
What must every SwiftUI view conform to?
- The View protocol
- The UIView class
- The Renderable protocol
- The Drawable class
Answer: The View protocol. A SwiftUI view is any type that conforms to the View protocol.
What is the single required member of the View protocol?
- A render() method
- A draw(rect:) method
- A computed body property
- An init() method
Answer: A computed body property. Conforming to View means providing a computed body property that returns the view's content.
What type does the body property return?
- Void
- An opaque some View
- A UIView
- A String
Answer: An opaque some View. body is declared as 'var body: some View', an opaque return type describing one concrete view.
How do you build complex UIs in SwiftUI?
- By subclassing UIView
- By composing small views together
- By editing a XIB file
- By writing one giant view
Answer: By composing small views together. SwiftUI favours composition: you nest and combine small, focused views to build larger ones.
Which view displays a line of read-only text?
- Label
- TextView
- Text
- StringView
Answer: Text. Text is the SwiftUI view used to show a string of read-only text.
What does the 'some' keyword in 'some View' indicate?
- An array of views
- An optional view
- An opaque type that is one specific View
- Any random type
Answer: An opaque type that is one specific View. 'some View' is an opaque return type: a single concrete type that conforms to View, hidden from the caller.
Which view is used to show an image asset?
- Picture
- Photo
- Bitmap
- Image
Answer: Image. Image displays images, e.g. Image("logo") or Image(systemName: "star").
How do you create an SF Symbol image?
- Image(symbol: "star")
- Image(systemName: "star")
- Symbol("star")
- Image.system("star")
Answer: Image(systemName: "star"). Image(systemName:) loads one of Apple's built-in SF Symbols by name.
What is a view modifier?
- A way to delete a view
- A separate protocol
- A storage property
- A method that returns a new modified view
Answer: A method that returns a new modified view. Modifiers like .padding() or .foregroundColor() return a new view wrapping the original with the change applied.
Why are SwiftUI views described as a description of the UI?
- They are mutable objects you update by hand
- They are lightweight value types SwiftUI uses to compute the screen
- They are stored in a database
- They run on a background thread only
Answer: They are lightweight value types SwiftUI uses to compute the screen. Views are cheap value-type descriptions; SwiftUI reads them to figure out what to render and updates them efficiently.
Continue this course
- Previous: The Result Type
- Next: @State & @Binding