Spacer & Layout Priority
Push views apart with Spacer and control sizing.
Spacer & Layout Priority is a free SwiftUI Academy lesson on CoddyKit. This is lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, and your progress syncs across the web and the CoddyKit app. The SwiftUI Academy course includes 4 lessons in total.
Meet Spacer
A Spacer is an invisible view that greedily expands to fill empty space inside a stack, pushing its neighbors apart.
Pushing Views Apart
Drop a Spacer between two views in an HStack and they fly to opposite ends, perfect for a label on the left and a value on the right.
HStack {
Text("Total")
Spacer()
Text("$42")
}Pushing to One Side
A single Spacer at the start shoves everything after it to the trailing edge. Place it first to right-align a row of content.
HStack {
Spacer()
Text("Right")
}Centering with Two Spacers
Wrap a view in two spacers and it centers itself. Each Spacer takes an equal share of the leftover space on either side.
HStack {
Spacer()
Text("Center")
Spacer()
}Spacer in a VStack
In a VStack a Spacer pushes vertically. Put one at the bottom to pin a button to the lower edge of the screen.
VStack {
Text("Top")
Spacer()
}Spacer with a Minimum Length
Give a Spacer a minLength to guarantee a gap that never collapses, even when the stack runs short on room.
HStack {
Text("A")
Spacer(minLength: 24)
Text("B")
}When Space Runs Out
When a stack is too small, SwiftUI must decide which view shrinks first. That decision is driven by each view's layout priority.
Setting Layout Priority
The layoutPriority modifier marks a view as more important. A higher number keeps its full size while lower-priority siblings shrink.
Text("Keep me full")
.layoutPriority(1)Protecting Important Text
When a long title and a subtitle compete, give the title higher layoutPriority so it shows fully and the subtitle truncates instead.
HStack {
Text("Important headline").layoutPriority(1)
Text("detail")
}Spacer vs Priority
Remember the split: Spacer distributes leftover space, while layoutPriority decides who shrinks when there is not enough to go around.
Building a Clean Row
Combine both for tidy rows: a Spacer separates label and value, and priority ensures the key text never gets clipped.
HStack {
Text("Username").layoutPriority(1)
Spacer()
Text("coddy")
}Quick Check
One last check on space and priority.
Recap
You did it! A Spacer fills and distributes space while layoutPriority controls which views shrink first, giving you balanced, robust layouts.
Frequently Asked Questions
Is the “Spacer & Layout Priority” lesson free?
Yes — the full text of “Spacer & Layout Priority” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO. The SwiftUI Academy course includes 4 lessons in total.
What will I learn in “Spacer & Layout Priority”?
Push views apart with Spacer and control sizing. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “Spacer & Layout Priority” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Adding Padding Around Views
- Sizing Views with frame
- Backgrounds & Corner Radius
- Spacer & Layout Priority