Skip to main content

How to make a fixed size Spacer

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to make a fixed size Spacer 관련

SwiftUI by Example

Back to Home

How to make a fixed size Spacer | SwiftUI by Example

How to make a fixed size Spacer

Updated for Xcode 15

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 projectopen in new window

A phone showing the text “First Label” some distance above the text “Second Label”.
A phone showing the text “First Label” some distance above the text “Second Label”.

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 projectopen in new window

A phone showing “First Label” at the top of the screen and “Second Label” at the bottom.
A phone showing “First Label” at the top of the screen and “Second Label” at the bottom.

Note

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

Similar solutions…
How to force views to one side inside a stack using Spacer | SwiftUI by Example

How to force views to one side inside a stack using Spacer
How to position views in a fixed grid | SwiftUI by Example

How to position views in a fixed grid
How to animate the size of text | SwiftUI by Example

How to animate the size of text
How to create different layouts using size classes | SwiftUI by Example

How to create different layouts using size classes
How to adjust the size of a view relative to its container | SwiftUI by Example

How to adjust the size of a view relative to its container

이찬희 (MarkiiimarK)
Never Stop Learning.