SwiftUI Views & the body Property

Reviewed & published by Brayan K

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.

Part of the free Swift course at LearnCodingFast — hands-on lessons with worked examples and the output they print, 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".

import SwiftUI

// Every SwiftUI screen is a TYPE that conforms to the View protocol.
// The protocol has ONE requirement: a computed 'body' property.
struct WelcomeView: View {
    // 'some View' is an OPAQUE type: it means "one specific kind of View,
    // but you (the caller) don't need to know which one."
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

// Text is a built-in view that shows a line of read-only text.
// Image shows a picture or an SF Symbol.
struct LogoView: View {
    var body: some View {
        Image(systemName: "swift")
    }
}

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.

import SwiftUI

// MODIFIERS return a NEW view that wraps the original with a change applied.
// You chain them; each one builds on the one before it.
struct StyledView: View {
    var body: some View {
        Text("Tap to continue")
            .font(.title)               // bigger font
            .foregroundColor(.blue)     // blue text
            .padding()                  // space around it
    }
}

// Order matters: .padding() then .background() pads first, THEN colours the
// padded area. Swap them and you'd colour the text first, then pad outside.
struct BadgeView: View {
    var body: some View {
        Text("New")
            .padding()
            .background(Color.green)
    }
}

Your turn. Fill in the blanks to declare a proper view and show a star above a welcome message.

// 🎯 YOUR TURN — fill in each ___ then preview it in Xcode.
import SwiftUI

struct GreetingView: ___ {        // 👉 the protocol every view conforms to
    var body: ___ View {          // 👉 the opaque keyword before 'View'
        VStack {
            // Show an SF Symbol named "star.fill"
            Image(systemName: "star.fill")
            // Show the text "Welcome back!"
            Text("___")            // 👉 your message
        }
    }
}

// ✅ When complete this shows 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").

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

Practice quiz

Continue this course

• Previous: The Result Type
• Next: @State & @Binding — Local source-of-truth state and two-way bindings in SwiftUI

Frequently asked questions

What is a View in SwiftUI?

A View is any Swift type (usually a struct) that conforms to the View protocol. The protocol has a single requirement: a computed body property describing what the view looks like. Views are lightweight value types — SwiftUI reads them to work out what to render and re-computes them efficiently when data changes, so you never manually update the UI.

What does the body property do?

body is a computed property of type 'some View' that returns the content of your view. SwiftUI calls body to build the view hierarchy. Because it returns a value each time, you describe what the UI should be for the current state, and SwiftUI handles drawing and updates.

What does 'some View' mean?

'some View' is an opaque return type. It tells the compiler the body returns one specific concrete type that conforms to View, without naming that type explicitly (it might be a deeply nested VStack<TupleView<...>>). It keeps signatures clean while preserving the exact type for SwiftUI's diffing.

How do I build a complex screen?

Through composition. You combine small views — Text, Image, Button — inside container views like VStack, HStack, and ZStack, and you extract reusable pieces into their own View structs. Each piece stays small and testable, and you nest them like building blocks.

What is a view modifier?

A modifier is a method such as .padding(), .font(), or .foregroundColor() that returns a new view wrapping the original with a change applied. You chain modifiers to style and configure views. Order matters: each modifier acts on the result of the previous one.