Layout
The conversation between parent and child
SwiftUI layout is a negotiation in three steps, and knowing it turns “why is this the wrong size?” into an answerable question.
- The parent proposes a size to the child.
- The child chooses its own size, and may ignore the proposal entirely.
- The parent places the child, having no power to resize it.
That third point is the one that surprises people. A parent cannot force a size on a child; it can
only propose. Text takes the width it needs for its content, Image takes its natural size, and a
Rectangle takes everything it is offered.
HStack {
Text("Label")
Spacer()
Image(systemName: "chevron.right")
}
.frame(width: 200)
frame does not resize the HStack — it inserts a new view that proposes 200 points to the stack
and then centers whatever the stack decided to be.
Once that model is in place, most layout bugs stop being mysterious. A view that is too wide accepted a proposal you did not mean to make. A view that is too narrow chose its own size and ignored you. A view in the wrong place was placed there by a parent doing exactly what you asked.
What the three chapters cover
The layout pass is the mechanism in detail: what a proposal actually is (including the three
special proposals that are not sizes at all), how Text and Image answer, and how to read a
layout that came out wrong by asking the two questions in order — what was proposed, and what was
chosen.
Stacks, frames and alignment is the everyday toolkit. How a stack divides space among children
that want different amounts, why Spacer is not empty space, what frame really does, and how
alignment guides let a label in one row line up with a label in another.
Writing a Layout builds a custom container with the Layout protocol — the same protocol
HStack uses. It is less exotic than it sounds: two required methods, and by the end the negotiation
is something you have implemented rather than something you have read about.
The order matters here. The layout pass is the model, stacks are the model applied, and Layout is
the model written down as code.