VStack adds a space when I have a ZStack with multiple items inside

Question

Created May ’22

Replies 2

Boosts 0

Views 3.6k

Participants 3

In the following code, when I add a ZStack inside a VStack, the default space between elements in VStack is changed and it is no longer 0.

import SwiftUI

struct TestView: View {

    private let imageSize:CGFloat = 48
    let email: String = "email"
    let phone: String = "phone"

    var body: some View {

        VStack(alignment:.leading, spacing: 0) {
            HStack(alignment: .center) {
                Image(systemName: "person")
                    .resizable()
                    .frame (width:imageSize, height: imageSize)
                    .padding(.leading, 16)
                    .padding(.trailing, 8)

                VStack(alignment:.leading) {
                    ZStack {
                        Text(email)
                            .foregroundColor(Color(UIColor.green))
                            .font(.headline)

                        Text(email)
                            .foregroundColor(Color(UIColor.green))
                            .font(.headline)
                    }

                    Text(phone)
                        .foregroundColor(Color(UIColor.green))
                        .font(.body)
                }

                Spacer()
                Image(systemName: "arrowshape.turn.up.right")
                    .padding(.trailing, 16)
            }
            .frame(height: 100)
            Divider()
        }
        .contentShape (Rectangle () )
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

If I remove one of the items from the ZStack and only leave one inside, the space in the VStack goes back to 0 and the 2 items are fine.

I know that adding the spacing in the VStack to 0

VStack(alignment:.leading, spacing: 0)

It would always stay correctly, regardless of the elements that the ZStack has, but in my code I do not have access to that VStack.

What seems strange to me is that in this example if inside the ZStack I add a single element it is seen correctly but when adding more than one the space of the parent VStack is modified

Any idea how to fix this? is it correct behaviour?

Thanks in advance!

Boost

Answer 1

robnotyou OP

May ’22

The vertical spacing is set by the VStack.
If the VStack's "spacing" is nil, then the stack will "choose a default distance for each pair of subviews".

As you are seeing, this distance is not necessarily the same for every pair of views.

It's not possible to specify the spacing within the VStack.
The only way to enforce the VStack spacing of 0 is to use:

VStack(alignment:.leading, spacing: 0) {

...which you can't do.

So I think you are stuck.

0

Answer 2

Claude31 OP

May ’22

Effectively, when 2 views in ZStack, positions inside VStack change.

To see exactly how much, I made this variation of code

        ZStack {
                        Text(email)
                            .foregroundColor(Color(UIColor.green))
                            .font(.headline)

                        Text("H")
                            .foregroundColor(Color(UIColor.red))
                            .font(.headline)
                    }

And get:

Now, I added a yellow background on email Text

                VStack(alignment:.leading) {
                    ZStack {
                        Text(email)
                            .foregroundColor(Color(UIColor.green))
                            .font(.headline)

                        Text("H")
                            .foregroundColor(Color(UIColor.red))
                            .font(.headline)
                    }
                    .background(.yellow)

                    Text(phone)
                        .foregroundColor(Color(UIColor.green))
                        .font(.body)
                }

and superimposed the different screenshots:

The ZStack has the same size, Text(phone) as well, but VStack positions them differently.

I added a third Text in ZStack, same behavior as with 2.

0