Setting multiple alignment guides in SwiftUI behaves strangely

Question

Created 1d

Replies 1

Boosts 0

Participants 2

Hello. Recently, while studying alignmentGuide, I had questions about it behaving differently from the documentation when setting multiple alignment guides.

For example, the document states that only the alignmentGuide modifier with a first parameter matching the container's alignment will function.

Therefore, I thought that writing the Swift code below would result in the yellow color's center alignment being aligned with the HStack's bottom alignment.

struct TestView: View {
    var body: some View {
        HStack(alignment: .bottom) {
            Color.yellow
                .frame(height: 50)
                .alignmentGuide(VerticalAlignment.center) { dim in
                    dim[.top]
                }
                .alignmentGuide(VerticalAlignment.top) { dim in
                    dim[.bottom]
                }
                .alignmentGuide(VerticalAlignment.bottom) { dim in
                    dim[VerticalAlignment.center]
                }
            Text("Hello, world")
        }
        .border(.green)
    }
}

Expect

However, in reality, I observed that the top of the yellow color aligns with the HStack's bottom alignment. From this, I inferred that the 3rd alignmentGuide is applied first, and this also causes the first alignmentGuide to work, which makes me curious about how this is possible. If I leave only the 3rd alignmentGuide, it behaves as I expected.

Real Behavior

Could anybody help me to figure it out this behavior? Thank you

Boost

Answer 1

Fat Xu OP

5h

You change center before bottom

.alignmentGuide(VerticalAlignment.center) { dim in
                    dim[.top] // re-assign center to 0
                }
                .alignmentGuide(VerticalAlignment.top) { dim in
                    dim[.bottom]
                }
                .alignmentGuide(VerticalAlignment.bottom) { dim in
                    dim[VerticalAlignment.center] // 0
                }

In order to avoid mutual dependence, center value can not be used when calculating bottom.

.alignmentGuide(VerticalAlignment.bottom) { dim in
                    dim.height / 2
                }

0