SwiftUI Stacks: Arrange Views Vertically, Horizontally, and in Layers

WHY IT EXISTS: Before SwiftUI, arranging UI elements often involved complex constraints or manual calculations of positions and sizes. Stacks were created to offer a simple, declarative, and composable way to build layouts. You describe what you want (a vertical stack of items) instead of how to achieve it (setting coordinates and constraints for each item).

THE MENTAL MODEL: Think of arranging items on a shelf. A VStack stacks them vertically, one on top of the other, like books on a bookshelf. An HStack arranges them horizontally, side-by-side, like pictures on a mantelpiece. A ZStack layers them on top of one another, with the first item at the bottom and the last at the top, like stacking a photo, a mat, and a frame.

HOW IT WORKS: Stacks are containers that manage the position and size of their child views. VStack arranges its children in a single vertical column. HStack arranges its children in a single horizontal row. ZStack overlays its children, aligning them in both the vertical and horizontal axes. By default, they are centered. The order matters: the first view you list inside a ZStack is at the back, and the last view is at the front. You can customize stacks with modifiers like spacing to control the gap between items and alignment to control how items are aligned within the stack.

WHEN TO USE IT: Stacks are the foundation of most SwiftUI layouts. Use VStack for main screen layouts, forms, or lists of information (e.g., a user's profile with a picture, name, and bio stacked vertically). Use HStack for toolbars, button bars, or any row of elements (e.g., "Like" and "Share" buttons side-by-side). Use ZStack to place content on top of a background, or to create overlays like a loading indicator or a "New" badge on an icon.

WHEN NOT TO USE IT: Stacks are not always the best tool. For large, scrolling collections of items, use List or a lazy stack (LazyVStack, LazyHGrid) to avoid creating all views at once, which saves memory and improves performance. Stacks also don't automatically wrap content to a new line; for that, you'd need a more complex custom layout.

ONE CANONICAL EXAMPLE: A common pattern is composing stacks. Imagine a user profile card. You might use a ZStack to place a text overlay on a background image. The text itself could be in a VStack containing the user's name and join date. Below the image, an HStack could hold "Follow" and "Message" buttons. This nesting of stacks lets you build complex UIs from simple, reusable components.