swiftui zstack alignment not working

Question

Created Feb ’20

Replies 7

Boosts 0

Views 14k

Participants 4

I have a ZStack with top leading alignment. The first child put into it aligns as expected (top leading) but the second child aligns to center. Is this a bug or am I missing something here.

        ZStack {
            HStack {
                Text("stack 1")

            }
            .frame(width: 150, height: 400, alignment: .topLeading)
            .background(Color.red)
            HStack {
                Text("stack 2")

            }
            .frame(width: 100, height: 200, alignment: .topLeading)
            .background(Color.blue)
        }
        .frame(width: 200, height: 500, alignment: .topLeading)
        .background(Color.yellow)

Boost

Answer 1

kPas42 OP

Feb ’20

After a ton of experimenting I found I can make it work if the HStack frames are set to the exact same size as the ZStack frame. This works for me in my situation but it still seems like a bug. In the above example if stack 1 is by itself then it moves to top leading. But as soon as you add stack 2 then stack 1 goes to centered.

0

Answer 2

Claude31 OP

Feb ’20

align is a property of the text in the HStack, not a property of the view itself.

Replace

.frame(width: 100, height: 200, alignment: .topLeading)

with

.frame(width: 100, height: 200, alignment: .bottomLeading)

to check it.

To achieve what you want, you should likeley use geometryReader

https://stackoverflow.com/questions/56518425/can-i-get-the-position-of-a-view-after-layout-in-swiftui

0

Answer 3

kPas42 OP

Mar ’20

The Z Stack alignment is what I'm concerned with. If you have a single view in the Z Stack it will align as expected. As soon as you add a second view everything changes. I tried to add an image to demonstrate but it isn't showing.

0

Answer 4

Claude31 OP

Mar ’20

I see what is happening. Effectively the second HStack in ZStack is not at top. But the text inside is at top, which is what align instructs to do.

Did you test with geomotryReader as explained in the reference ?

0

Answer 5

kPas42 OP

Mar ’20

I have not tried Geometry reader yet as I am just trying to understand the basic behaviour and what the heck is going on. I realize the text within each hstack is aligned topleading however that is not my concern. The zstack alignment is top leading so from my understanding every child (hstack's) should be aligned to the top leading edge of the zstack. This is the case when I add the fisrt hstack. It aligns to the top leading edge as expected. However as soon as the second hstack is added the e first hstack centers in the zstack view. I expect both hstacks to align to top leading since they are both children of the zstack which has a top leading alignment modifier.

I would love to show you the images but can't figure out how to add images to this thread.

0

Answer 6

markf.murphy@hotmail.com OP

Jan ’21

in ZStack alignment small component align base on the largest one

try:
Zstack(alignment: .topTrailing) {
your large view (for eg. Vstack of frame width and height were with full screen)
your small view and set frame of this small view individually to make further adjustment
}

// to do more experimentally:
adjust the large view frame size and observe the position change of the small view.

1

Answer 7

cpayn OP

Jun ’21

Mark's answer is correct for, but just to make it clearer.

Like the question, I was using

ZStack{
   // Child content
}
.frame(width: 200, height: 500, alignment: .topLeading)

But this doesn't work, presumably because the frame is adding a parent view to the ZStack, and the alignment is not being added directly to the ZStack itself.

By taking the following approach of passing the alignment directly to the ZStack at initialisation, I was able to get the expected results with all children position top left.

ZStack(alignment: .topLeading) {
   // Child content
}
.frame(width: 200, height: 500, alignment: .topLeading)

0