8.12 · Sharing space, alignment guides, adaptive containers and grids, measured

The negotiation rules are easy to recite and easy to mispredict. These layouts were hosted in an iOS Simulator and measured with GeometryReader, so the numbers are what SwiftUI actually produced.

Mental model. Every container proposes, every child answers. Flexible children get what is left after rigid ones; guides move whole stacks; adaptive containers decide by proposal, not by content you cannot see.

Stacks and guides

How an HStack divides a tight width, and how alignment guides shift siblings.

  1. How does an HStack divide a width that is too small, and what do layoutPriority and fixedSize change? 8.12.1 · L3
    The stack asks each child what size it would take for the proposal, sorts children by flexibility (how much their size can vary) and offers space to the least…
  2. How do alignment guides and custom alignments work, and why does moving one view’s guide move its siblings? 8.12.2 · L5
    A stack with an alignment (.leading, .center, …) lines each child up at the position of that alignment's guide, a number each child reports: by default the…

Adaptive containers

ViewThatFits, AnyLayout and the grid types.

  1. How do ViewThatFits and AnyLayout differ, and which one preserves state when the arrangement changes? 8.12.3 · L3
    ViewThatFits picks the first child whose ideal size fits the proposal along the constrained axes, falling back to the last. In the check, in 300 points it…
  2. How do GridItem sizes (fixed, flexible, adaptive) and Grid differ in how they size columns? 8.12.4 · L3
    LazyVGrid takes an array of GridItem column descriptions and lays children into them row by row. .flexible() columns share the width left over (two of them in…

More in SwiftUI