Stack

A stack arranges other views and can contain other views as children.

A vertical stack arranges views from top to bottom, while a horizontal stack arranges views side by side. A depth stack layers views on top of each other, like placing text over a symbol.

By itself, without child views or view settings like background and border, a stack has no visible appearance.

Choose a Stack Axis

Axis chooses how child views are arranged. Vertical stacks arrange children from top to bottom. Horizontal stacks arrange children side by side. Depth stacks layer children on top of each other.

Spacing applies to horizontal and vertical stacks. It does not add separation in a depth stack because depth stack children overlap.

A small widget showing three rounded squares arranged vertically. — Vertical

A small widget showing three rounded squares arranged horizontally. — Horizontal

A small widget showing three rounded squares layered in a depth stack. — Depth

A small widget showing rounded squares in a nested horizontal and vertical stack. — Mixed nesting

Use padding for fixed space inside a stack. Use spacer when child views should push apart.

Align Children

Child Alignment aligns child views relative to each other across the stack.

In a vertical stack, Child Alignment controls whether narrower children line up with the leading edge, center, or trailing edge of the widest child. In a horizontal stack, it controls whether shorter children line up with the top, center, bottom, or a text baseline.

Child Alignment does not move the stack inside extra space from its frame. To place a stack at the top, center, bottom, leading edge, or trailing edge of its frame, use Frame alignment.

A small widget showing three rounded squares in a vertical stack, with smaller squares aligned to the leading edge of the widest square. — Leading aligns children to the start edge of the widest child.

A small widget showing three rounded squares in a vertical stack, with smaller squares centered against the widest square. — Center aligns children around the middle of each child.

A small widget showing three rounded squares in a vertical stack, with smaller squares aligned to the trailing edge of the widest square. — Trailing aligns children to the end edge of the widest child.

Properties

Identity

Property	Description
ID	Identifies the view so you can find it in the canvas and modify it with Shortcuts actions. Keep it stable for automations.
Visible	Hides the view without deleting it. Hidden views are not shown, but they stay in the canvas.

Stack Layout

Property	Description
Axis	Chooses horizontal, vertical, or depth layout.
Spacing	Sets the space between child views inside a horizontal or vertical stack.
Child Alignment	Aligns child views relative to each other across a horizontal or vertical stack. Use Frame to move the stack area.
Alignment	Aligns layered content when Axis is depth.

Layout

Property	Description
Frame	Controls size and alignment.
Offset	Moves the view visually with an offset.
Padding	Adds padding.

Appearance

Property	Description
Opacity	Sets transparency from 0 to 100.
Background	Adds a background.
Shadow	Adds a shadow.
Clip Shape	Clips the view to a shape.
Border	Adds a border.