< How to force views to one side inside a stack using Spacer | How to layer views on top of each other using ZStack > |
Updated for Xcode 13.3
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.
SPONSORED Fernando's book will guide you in fixing bugs in three real, open-source, downloadable apps from the App Store. Learn applied programming fundamentals by refactoring real code from published apps. Hacking with Swift readers get a $10 discount!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Link copied to your pasteboard.