If you’ve used UIKit, or manipulated the DOM by hand, you’re used to telling the screen what to change: set this label’s text, hide that button, insert a row. SwiftUI flips that around. You describe what the screen should look like for the current data, and SwiftUI works out what changed and updates the pixels. Your job shrinks to writing that description well.
\nHere is the row Pocket Budget shows for each expense, using the Expense and Category types from the previous section:
import SwiftUI\n\nstruct ExpenseRow: View {\n let expense: Expense\n\n var body: some View {\n HStack(spacing: 12) {\n Image(systemName: expense.category.symbolName)\n .font(.title3)\n .frame(width: 32)\n .foregroundStyle(.tint)\n\n VStack(alignment: .leading, spacing: 2) {\n Text(expense.title)\n .font(.headline)\n Text(expense.date, format: .dateTime.day().month())\n .font(.subheadline)\n .foregroundStyle(.secondary)\n }\n\n Spacer()\n\n Text(expense.amount, format: .currency(code: \"USD\"))\n .font(.body.monospacedDigit())\n }\n .padding(.vertical, 4)\n }\n}ExpenseRow conforms to the View protocol, whose one requirement is body. It’s a struct, so it’s cheap to create, and SwiftUI creates and discards them constantly. Don’t think of a view struct as the thing on screen; think of it as a recipe that SwiftUI reads whenever the data changes.
some View is the opaque type from the protocols lesson. The real type of that body is a deeply nested generic built from every stack and modifier, and some View lets the compiler track it without you writing it out.
Three containers handle most layouts. HStack places children left to right (right to left in Arabic and Hebrew, automatically), VStack top to bottom, and ZStack layers them front to back. alignment and spacing control how children line up. Spacer() expands to fill free space, which is how the amount ends up pinned to the trailing edge.
Text can format values for you: Text(expense.amount, format: .currency(code: "USD")) and Text(expense.date, format: .dateTime.day().month()) follow the user’s locale, so a user in Cairo or Berlin sees separators and date order they expect. .monospacedDigit() keeps columns of amounts aligned.
.font(.headline) doesn’t change the text in place. It returns a new view that wraps the text and applies a font. Chain three modifiers and you’ve built three layers. That’s why order matters:
Text(\"Food\")\n .padding()\n .background(.blue) // blue covers the text AND the padding\n\nText(\"Food\")\n .background(.blue) // blue covers only the text\n .padding() // clear space outside the blueRead a modifier chain from top to bottom as “take this, then wrap it in that”. Some modifiers, such as .font and .foregroundStyle, flow down to every child, which is why setting .font(.title3) on a VStack styles all the text inside it.
Because body is a description, plain Swift decides what’s in it. An if includes a view only when a condition holds, and a switch picks between views:
HStack {\n Text(expense.title)\n if expense.amount > 100 {\n Image(systemName: \"exclamationmark.circle\")\n .foregroundStyle(.orange)\n .accessibilityLabel(\"Large expense\")\n }\n}There’s no “show” or “hide” call anywhere. When the amount changes, SwiftUI reads body again and the icon appears or disappears on its own. Keep a body free of side effects, such as network calls or printing, because SwiftUI may read it many times and at moments you don’t control.
Add a preview to the bottom of the file:
\n#Preview {\n ExpenseRow(expense: Expense(title: \"Groceries\", amount: 64.2, category: .food, date: .now))\n .padding()\n}Xcode renders it in the canvas next to your code and updates as you type. Previews are the fastest feedback loop in iOS development. Add one for each interesting state, such as a long title, a large amount or right-to-left layout, and you catch layout bugs before you ever launch the simulator.
\nWhen a body passes about a screenful, extract pieces into their own structs:
struct CategoryBadge: View {\n let category: Category\n\n var body: some View {\n Text(category.title)\n .font(.caption.bold())\n .padding(.horizontal, 10)\n .padding(.vertical, 4)\n .background(.blue.opacity(0.15), in: Capsule())\n .foregroundStyle(.blue)\n }\n}Now CategoryBadge(category: expense.category) can appear in the row, the detail screen and a filter bar, styled identically. Extraction is free at runtime and gives SwiftUI smaller units to compare when data changes.
Everything in this lesson shows fixed data. Real screens change: the user types, toggles and adds expenses. The next lesson introduces state, the data that drives those changes, and how SwiftUI knows when to redraw.
\n","toc":[{"id":"sec-1","text":"A view is a struct with a body","level":2},{"id":"sec-2","text":"Stacks and spacers","level":2},{"id":"sec-3","text":"Modifiers wrap views","level":2},{"id":"sec-4","text":"Logic in a body","level":2},{"id":"sec-5","text":"Previews","level":2},{"id":"sec-6","text":"Small views, composed","level":2}],"takeaways":["A SwiftUI view is a lightweight struct whosebody describes what the screen should look like for the current data.","VStack, HStack and ZStack arrange children vertically, horizontally and in layers; Spacer pushes content apart.","Each modifier wraps the view in a new one, so order matters; padding before background paints behind the padding.","Extract a subview as soon as a body gets hard to read; small views cost nothing at runtime."],"further":[{"title":"Configuring views","url":"https://developer.apple.com/documentation/swiftui/configuring-views"},{"title":"SwiftUI Tutorials","url":"https://developer.apple.com/tutorials/swiftui"}],"quiz":[{"q":"What does Text("Food").background(.blue).padding() look like?
.padding().background(.blue). Here the background is applied before the padding exists."},{"text":"Blue fills only the text’s own frame, with clear space around it.","why":"Correct. background wraps the text, then padding adds empty space outside that coloured view."},{"text":"SwiftUI reorders modifiers, so it looks the same either way.","why":"SwiftUI applies modifiers in exactly the order you write them; each one wraps the previous result."}],"answer":1},{"q":"Why is body declared as some View instead of a specific type?
some hides a name, it doesn’t make the type dynamic."},{"text":"Because the real type is a long nested generic that you’d never want to write by hand.","why":"Correct. The compiler knows the exact type; some View saves you from spelling it."},{"text":"Because View is a class and some makes it a struct.","why":"View is a protocol, and your views are structs either way."}],"answer":1},{"q":"A row’s body has grown to 70 lines. What does an experienced SwiftUI developer do?
AnyView.","why":"AnyView erases type information that SwiftUI uses to diff efficiently. Use a subview struct instead."},{"text":"Extract meaningful pieces into their own small View structs.","why":"Correct. Named subviews read like an outline of the screen and can be previewed on their own."}],"answer":2}],"exercise":{"kind":"choice","options":["a","b","c","d"],"correct":["b"],"title":"Build the category pill","prompt":"Pocket Budget’s design calls for a category label shaped like a pill: blue capsule background, with the text inset from the capsule’s edges by some breathing room. Which modifier chain produces it?
\n","hints":["The blue must cover the space around the text, so the space has to exist before the background is applied.","clipShape cuts a view to a shape. What does it cut if the background hasn’t been added yet?","background(_:in:) paints a style inside a shape in one step."],"explanation":"Modifiers apply top to bottom, each wrapping the result so far. In the correct chain the two padding calls create the inset first, and background(.blue, in: Capsule()) then paints a capsule behind the text and its padding.
The other chains apply the background too early (so the padding is outside the blue) or clip before there’s any background to clip. When a SwiftUI shape is the wrong size, check the modifier order before anything else.
\n","checkLabels":{},"optionText":{"a":{"text":"Text("Food").background(.blue).padding().clipShape(Capsule())","why":"The blue is applied before the padding, so it hugs the text; the clip then rounds a mostly transparent area."},"b":{"text":"Text("Food").padding(.horizontal, 12).padding(.vertical, 6).background(.blue, in: Capsule())","why":"Correct. The padding exists first, then the capsule is painted behind the text plus its padding."},"c":{"text":"Text("Food").clipShape(Capsule()).padding().background(.blue)","why":"This clips the bare text, then paints a blue rectangle around the padding. You get a rectangle, not a pill."},"d":{"text":"Text("Food").background(.blue).clipShape(Capsule()).padding()","why":"This makes a tiny pill that hugs the letters with no inset, then adds clear space outside it."}}},"words":691,"readMinutes":3}