How to layer views on top of each other using ZStack
Updated for Xcode 12.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("example-image")
Text("Hacking with Swift")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
}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("example-image")
Text("Hacking with Swift")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
}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.
SPONSORED Announcing NSSpain 2020: Remote Edition! An online, continuous conference for iOS developers. We’ll start on Thursday and finish on Friday, with talks, activities, and lots of fun for 36 hours, non-stop. Sound good? Join us!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
