SwiftUI ZStack frame issue

Question

I try to layer a blur view underneath some text and a picture, which are contained in an HStack, by putting both the blur view and the HStack into a ZStack. I also applied a frame to the blur view to give it my wanted dimensions. But whenever I change the frame width it seems to affect the HStack (pushing it further to the sides) and it's content, which, given the fact that both are contained in a ZStack and is therefore basically lying underneath the HStack, it shouldn't.

Blur view width 415

Blur view width 600

After some testing, I found out that the width of the blur view only affects the elements laying above it when they are contained in some kind of stack.

struct AlbumNameView: View {
    var body: some View {
        ZStack {
            BlurView(style: .dark)
                .frame(width: 415, height: 155)
                .shadow(radius: 2, x: 0, y: 3)

            HStack {
                Image("shindy nautilus")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(24)
                    .frame(width: 130, height: 130)
                    .shadow(radius: 4)

                VStack(alignment: .leading) {

                    Text("Nautilus")
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .bold()
                        .shadow(radius: 1, x: 0, y: 1)

                    Text("Shindy")
                        .foregroundColor(.white)
                        .font(.headline)
                        //.bold()
                        .shadow(radius: 1, x: 0, y: 1)

                    Spacer()

                } .frame(width: 230, height: 120, alignment: .leading)


                Spacer()

            }
            .padding(.horizontal)
        }
    }
}

I don't believe that's a bug so I think that I still fail to grasp why the blur view's width affects the stacks above it and maybe someone could explain how can I change that.

I have edited the post and added 2 pictures explaining my problem! — lavendermoney

LuLuGaGa LuLuGaGa · Accepted Answer · 2019-09-22T22:20:14

Instead of hardcoding exact size of your BlurView using frame modifier, try using ascpectRatio:

.aspectRatio(2.68, contentMode: .fit)

ZStack determines its size by taking the size of its widest and tallest child.

A View which has a Spacer() inside it will take up any space offered by its parent

If your BlurView() had no frame the size of the ZStack would be determined by the HStack, and because it has a Spacer() it would take the whole width of the screen.

In your example the BlurView() has a frame wider than the screen, so it forces the ZStack to be the same width, which in turn means that the HStack gets offered the same width and because of the spacer takes it and expands beyond the width of the screen.

SwiftUI ZStack frame issue

1 Answers