It looks like your Spacer() should be inside the VStack, after the Text.
You're currently telling SwiftUI to display a background image, then on top of that (because of the ZStack), display Text inside a VStack, but your Text is the only thing in the VStack so it just sits there in the centre.
Then you're saying have a Spacer(), but this is inside the ZStack so it isn't pushing the Text up, it's just layered on top of the VStack. The way to fix it is to put the Spacer() in the VStack.
You can see this clearly if you change your Spacer() to something like:
Rectangle()
.fill(Color.green)
.frame(width: 100, height: 50)
Let's see what it does in the different formats:
ZStack {
VStack {
Text("What would you like to do?")
.font(.title)
.fontWeight(.bold)
}
.padding()
// -- Outside of the VStack, as you currently have it:
Rectangle()
.fill(Color.green)
.frame(width: 100, height: 50)
// Spacer()
}
So, here, your Spacer() (the Rectangle()) is where your current Spacer() is, and it produces this:
Now, moving the Spacer/Rectangle inside the VStack:
ZStack {
VStack {
Text("What would you like to do?")
.font(.title)
.fontWeight(.bold)
// -- Inside the VStack:
Rectangle()
.fill(Color.green)
.frame(width: 100, height: 50)
// Spacer()
}
.padding()
}
And it looks like this:
So, using a Spacer() inside the VStack does this:
