Spacer

Overview

A Spacer creates an adaptive layer with no content that expands as much as it can. Use it to push content within a stack apart, to use all of the available space offered horizontally or vertically by a stack.

For example, when placed within an HStack, a Spacer expands horizontally as much as the stack allows, moving sibling layers out of the way, but within the limits of the stack’s size.

Adding a Spacer before the image creates an adaptive layer with no content that expands to push the Image and Text layers to the right side of the stack.

Moving the Spacer between the Image and Text layers pushes those elements to the left and right sides of the HStack respectively.

Adding a Spacer layer to each side of the stack leaves the Image and Text layers together, while the stack expands to take as much horizontal space as the parent layer allows.

Regardless of where the Spacer is placed, it will always expand to take up as much room as the parent layer allows.

Pro Tip
Press "s" on your keyboard to insert a Spacer.