Home

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.

  1. The parent proposes a size to the child.
  2. The child chooses its own size, and may ignore the proposal entirely.
  3. 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.