SwiftUI: spacing

Sep 16, 2021

Learn how to add spacing between views in SwiftUI using the spacing parameter of a VStack, the Spacer view, and the frame modifier to size the gap.

~~~

In the last SwiftUI tutorial I mentioned how views can be arranged using stacks:

VStack {
    Text("Hello World")
    Text("Hello again!")
}

Two text views in a VStack with no spacing between them, showing default behavior

Let’s talk about spacing.

See how there’s no space between the two Text views? That’s because it’s the default behavior of VStack.

VStack accepts a spacing parameter:

VStack(spacing: 100) {
    Text("Hello World")
    Text("Hello again!")
}

This puts a 100 points space between the views contained in the VStack.

Two text views in a VStack with 100 points spacing between them

You can also use a Spacer view:

VStack {
    Text("Hello World")
    Spacer()
    Text("Hello again!")
}

Spacer fills all the available space as it can:

Two text views with a Spacer filling all available space, pushing texts to top and bottom of screen

You can limit it to a specific set of points using the frame() modifier:

VStack {
    Text("Hello World")
    Spacer()
      .frame(height: 20)
    Text("Hello again!")
}

Two text views with a Spacer limited to 20 points height using frame modifier

~~~