How to make a fixed size Spacer

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

SwiftUI’s Spacer views automatically fill up all available space on their axis of expansion, which is a fancy way of saying they take up as much space as they can either horizontally or vertically, depending on what you put them in.

If you want to make a spacer of an exact size, just do the same thing you would do for any other kind of view: use a frame() modifier with the exact sizes you want.

For example, this shows two text views, with a 50-point spacer in between them:

VStack {
    Text("First Label")
    Spacer()
        .frame(height: 50)
    Text("Second Label")
}

Download this as an Xcode project

If you give the spacer a range of values, for example using .frame(minHeight: 50, maxHeight: 500), then it will automatically take up as much space as it can, up to the maximum you set. Adding some flexibility in this way is usually a good idea, so that your user interfaces scale across devices more easily.

There are some situations where you want to specify a spacer size agnostic to its layout direction, for example if your views might sometimes be in a HStack or a VStack and you want the spacer to add 50 points regardless of direction.

In this circumstance you should use the minLength initializer, like this:

VStack {
    Text("First Label")
    Spacer(minLength: 50)
    Text("Second Label")
}

Download this as an Xcode project

Note: That’s a minimum length, so the spacer will still grow to be larger if space is available.

Sponsor Hacking with Swift and reach the world's largest Swift community!

How to make a fixed size Spacer

Similar solutions…