SwiftUI布局问题：如何用AlignmentGuide实现多Stack的4项对齐约束

布局需求 #

• 蓝色与绿色矩形水平居中对齐
• 红色与紫色矩形左对齐
• 蓝色与红色矩形顶部对齐
• 绿色与紫色矩形垂直居中对齐

现有SwiftUI代码满足了前3项约束，但未实现第4项。请问能否仅使用AlignmentGuide而非GeometryReader自动满足全部4项约束？

现有代码 #

struct AlignmentTestView: View {
    var body: some View {
        HStack(alignment: .top) {
            VStack(alignment: .center) {
                Rectangle()
                    .fill(.blue)
                    .frame(width: 50, height: 50)
                
                Rectangle()
                    .fill(.green)
                    .frame(width: 30, height: 30)
            }
            
            VStack(alignment: .center) {
                Rectangle()
                    .fill(.red)
                    .frame(width: 200, height: 40)
                
                Rectangle()
                    .fill(.purple)
                    .frame(width: 200, height: 20)
            }
        }
        .padding()
        .background(.yellow)
    }
}

当前布局效果 #

解决方案：仅用AlignmentGuide实现全部约束 #

完全可以通过自定义AlignmentGuide实现所有需求，无需GeometryReader。核心是创建一个共享对齐标记，让绿色和紫色矩形的垂直中心绑定到该标记，同时保留其他原有对齐规则。

修改后的代码 #

// 定义自定义垂直对齐指南
extension HorizontalAlignment {
    private enum GreenPurpleVerticalCenter: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[VerticalAlignment.center]
        }
    }
    static let greenPurpleCenter = HorizontalAlignment(GreenPurpleVerticalCenter.self)
}

struct AlignmentTestView: View {
    var body: some View {
        HStack(alignment: .top) {
            // 左侧VStack保持水平居中，满足蓝绿水平居中
            VStack(alignment: .center) {
                Rectangle()
                    .fill(.blue)
                    .frame(width: 50, height: 50)
                
                Rectangle()
                    .fill(.green)
                    .frame(width: 30, height: 30)
                    // 将绿色矩形的垂直中心绑定到自定义对齐指南
                    .alignmentGuide(.greenPurpleCenter) { $0[VerticalAlignment.center] }
            }
            
            // 右侧VStack改为leading对齐，满足红紫左对齐
            VStack(alignment: .leading) {
                Rectangle()
                    .fill(.red)
                    .frame(width: 200, height: 40)
                
                Rectangle()
                    .fill(.purple)
                    .frame(width: 200, height: 20)
                    // 将紫色矩形的垂直中心绑定到自定义对齐指南
                    .alignmentGuide(.greenPurpleCenter) { $0[VerticalAlignment.center] }
            }
        }
        // 让HStack在自定义对齐指南上对齐，确保绿紫垂直中心对齐
        .alignmentGuide(.greenPurpleCenter) { $0[VerticalAlignment.center] }
        .padding()
        .background(.yellow)
    }
}

关键说明 #

1. 自定义对齐标记：扩展HorizontalAlignment定义greenPurpleCenter，作为绿紫矩形垂直中心对齐的共享参考点。
2. 红紫左对齐：将右侧VStack的alignment改为.leading，直接实现红色与紫色矩形左对齐。
3. 绿紫垂直居中：分别给绿色和紫色矩形添加alignmentGuide，将它们的垂直中心绑定到自定义标记，同时让HStack关联该标记，确保两个VStack在该点对齐，从而实现绿紫垂直居中。
4. 保留原有约束：HStack保持.top对齐确保蓝红顶部对齐，左侧VStack保持.center对齐确保蓝绿水平居中，所有约束均满足。

内容的提问来源于stack exchange，提问作者Andrei Herford