All Collections
Layout
16 articles
Essentials
Use these layers to build the skeleton of your app.
▶️ Stacks & Spacers 101Build a search bar to learn about HStack, VStack, ZStack, and Spacer—the foundational elements of all layouts.
HStackA layer that arranges its sublayers in a horizontal line.
VStackA layer that arranges its sublayers in a vertical line.
ZStackA layer that arranges its sublayers on top of each other.
SpacerA flexible space that expands along the major axis of its containing stack layout.
DividerA visual element that is used to separate other content on a screen.
Modifiers
Apply these modifiers to set the size, spacing, and position of your layers.
Background ModifierPlace layers behind another layer.
Overlay ModifierPlace layers in front of another layer.
Padding ModifierAdd an equal padding amount to specific edges of a layer.
Frame ModifierPosition layers within an invisible frame with a specified size.
Container Relative Frame ModifierPosition a layer within an invisible frame with a size relative to the nearest container.
Fixed Size ModifierFix a layer’s size to specific dimensions.
Layout Priority ModifierGive the priority of space to a specific child in a layout.
Position ModifierPosition the center of a layer at specific coordinates in its parent’s coordinate space.
Offset ModifierOffset a layer by specific horizontal and vertical distances.
Ignores Safe Area ModifierExpand a layer out of its safe area.