How to layer views on top of each other using ZStack
Updated for Xcode 13.0
SwiftUI has a dedicated stack type for creating overlapping content, which is useful if you want to place some text over a picture for example. It’s called ZStack, and it works identically to the other two stack types.
For example, we could place a large image underneath some text like this:
ZStack {
Image("niagara-falls")
Text("Hacking with Swift")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
}
Download this as an Xcode project
Like the other stack types, ZStack can be created with an alignment so that it doesn’t always center things inside itself:
ZStack(alignment: .leading) {
Image("niagara-falls")
Text("Hacking with Swift")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
} Download this as an Xcode project
However, it doesn’t have a spacing property because it doesn’t make sense. Instead, you should use the offset() modifier as shown in How to adjust the position of a view using its offset.
Click here to save 50% on all my books and bundles!
Similar solutions…
