Stacks are elements that can contain other elements or components. They're similar to "frames" in other design tools. There are three types of stacks in Play: vertical, horizontal, and Z stacks. Vertical and horizontal stacks work similarly to Auto Layout in Figma or Smart Layout in Sketch. You can use the Element Settings Panel to define how the stack’s children should be arranged, spaced, and aligned.

Choose if your stack will have a vertical direction, horizontal direction, or no direction. Stacks with a vertical direction place their children from top to bottom, while stacks with a horizontal direction place their children from left to right.

Stacks with no direction allow you to place all objects absolutely within the stack. This stack does not have Auto Layout, but you can still add padding & alignment.

Stacks with no direction are Z stacks in SwiftUI. Learn more about Z stacks here.

Adjust the space between a stack’s children using the Gap property. You can enter a value or use your Spacing styles.

Horizontal stacks have three vertical alignment settings: Top, Center, and Bottom. Vertical stacks have three horizontal alignment settings: Left, Center, and Right. A stack’s alignment will align the stack’s children, but those children can have their own alignment settings too.

Use the Distribution property to space a stack’s children along the axis of the stack’s direction. There are six options:

Objects distributed from the start will align at the start of the stack, the top for vertical stacks and the left for horizontal stacks. The spacing between each object is determined by the Gap setting.

Objects distributed from the center will align in the center of the stack. The spacing between each object is determined by the Gap setting.

Objects distributed from the end will align at the end of the stack, the bottom for vertical stacks and the right for horizontal stacks. The spacing between each object is determined by the Gap setting.

Objects distributed evenly will have equal spacing between each object and the sides of the stack. The space is calculated using the total height of a vertical stack or the total width of a horizontal stack.

Objects distributed with space around will have equal spacing around each object, which will make the space between objects double the space between the first/last object and the sides of the stack. The space is calculated using the total height of a vertical stack or the total width of a horizontal stack.

Objects distributed with space between will have equal spacing between each object and no spacing between the first/last object and the sides of the stack. The space is calculated using the total height of a vertical stack or the total width of a horizontal stack.

By default, scrolling is set to Auto. This means that if a container’s content is larger than its height or width, a user in Play Mode will be able to scroll the container to see its overflowing content. By tapping the Scrolling property, you can turn Auto off, which gives you more options to choose from.

With Auto off, you can allow your stack to scroll vertically or horizontally if there is overflow content. When you turn either scrolling option on, you can choose whether the scrollbar is visible or not.

If the scrollbar is turned on, you can make the indicator black, white, or system default.

With paging enabled, each object will snap into position as you scroll through the stack. There are four options: Default, Start, Center, and End. If you want your stack to continuously scroll without snapping to any of the objects, you can select None.