SwiftUI layout puzzles
Each screen is broken on purpose. Change one modifier, watch the layout move, and make it match the target. When it matches, you get the rule behind it, in simple words. The easiest way to learn layout is to poke at it.
0 of 10 solved
- 1. Bars with gapsThe three colour bars should touch each other, with no gaps between them.
- 2. Centered linesBoth lines of text should start at the same left edge.
- 3. Tight tagThe blue tag should have space around the text, so the text does not touch the edges.
- 4. Price at the end"Total" should be on the left and the price on the right, across the whole grey bar.
- 5. Badge in the middleThe red badge should sit on the top-right corner of the blue circle.
- 6. Title in the middle"Settings" should be on the left side of the yellow bar.
- 7. Small buttonThe blue button should be as wide as the screen (with the normal side margins).
- 8. Floating titleThe title and the line under it should sit in the top-left corner of the screen.
- 9. Overlapping boxesLeave a 24-point gap above the orange box. The boxes must not overlap.
- 10. Tiny starThe star should fill the grey square.