What the Subviews Answered

Chapter 7 asked what happens when a parent offers a width. This chapter asks who answers.

A custom Layout calls sizeThatFits on every chip, then places them. A plain HStack gets the same chips and never wraps — that is the control.

The answers (every offer)

A:64×36 · B:56×36 · C:72×36 · D:48×36 · E:96×36

Those are what each chip reports from sizeThatFits(.unspecified). The offer changes; the answers do not.

Wide — 300 pt → 2 rows

FLOW fits App · v1.4 · Build · 418, then wraps TestFlight. HSTACK keeps one row and clips Te….

Mid — 210 pt → still 2 rows, earlier wrap

Row 1 stops after Build (192 pt of chips). 418 and TestFlight take row 2.

Narrow — 150 pt → 3 rows

struct ShipFlowLayout: Layout {
  func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize { … }
  func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) { … }
}

Inside arrange, each subview answers with subview.sizeThatFits(.unspecified). If x + size.width would exceed proposal.width, the layout resets x and starts a new row.

Mini-exercise

Change chip E from 96 to 40. At offer 300, FLOW should drop to 1 row. Re-capture mentally: 64+56+72+48+40 + spacers fits under 300.

Challenges

1. Add cache that stores the arrange result so sizeThatFits and placeSubviews share one pass.
2. Honor a vertical proposal — if height is tight, stop placing and report truncated count on a card.
3. Replace fixed chip widths with Text that sizes from content and photograph new answers.
4. Put ShipFlowLayout beside LazyVGrid with two columns and compare row counts at 150 pt.
5. XCUITest: after -mode narrow, assert text contains OFFERED / 150 and FLOW / 3.

Key Points

• Layout asks with ProposedViewSize; subviews answer with sizeThatFits.
• Observed answers: A 64×36 · B 56×36 · C 72×36 · D 48×36 · E 96×36.
• Observed FLOW rows: 2 at 300, 2 at 210, 3 at 150.
• Observed HSTACK: 1 row at every offer (clipped).
• Wrapping is explicit in placeSubviews, not automatic.
• HStack is the control that proves wrapping is not free.
• Direct sequel to ch7's offered-width board — now the container is custom.
• Footer line offer N · flow Nr · stack 1r is the still's checksum.

Next up: testing SwiftUI — a view model tested in isolation vs the same behaviour through XCUITest, reusing the ch8 harness.