Setting multiple alignment guides in SwiftUI behaves strangely

Question

Created Dec ’24

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

Answered by Fat Xu in 819301022

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
                }

Boost

Answer 1

Fat Xu OP

Dec ’24

Accepted Answer

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
                }

1

	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)
	}
	}

	.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
	}

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