SwiftUI large Image in ZStack breaks alignment of other layers

user_2607891 0
Viewed 966

I have a simple ContentView consisting of a VStack with some text and a spacer.

VStack {

    Text("Hello")

    Spacer()

    Text("World")
}

I want to put a background image behind it. I tried using ZStack.

ZStack {

    Image("background")

    VStack {

        Text("Hello")

        Spacer()

        Text("World")
    }

But now the VStack doesn't respect the safe area anymore.

Also in landscape mode the VStack doesn't rescale at all, effectively moving its contents out of view.

Why does the Image affect the VStack? I thought the ZStack keeps layers "independent"?

swiftui image
1 Answers

What's happening here is correct, if the size of the "background" image is large and roughly the size of the screen.

The size of the ZStack view is determined by the size of its layers. It's made big enough to just encapsulate them. Here it looks like the overall size is determined by the "background" image size. That in turn effects the size of the VStack layer because its Spacer will expand to fill to that size.

Resize your Image to what you want. Also look at using the background() modifier on the VStack instead of a ZStack.

How you want the Image to look in landscape mode is up to you, but it won't resize or flip by itself.

user_41906190
Related