SwiftUI中如何跨多个轴实现多视图的对齐布局？

实现思路 #

该布局的核心诉求是两个圆形跨不同HStack保持水平居中对齐，同时每个圆形与对应矩形保持垂直居中对齐，通过自定义水平对齐指南即可实现，无需硬编码偏移量。

步骤1：定义自定义对齐参考线 #

首先扩展HorizontalAlignment定义专属对齐ID，作为两个圆形的统一对齐基准：

extension HorizontalAlignment {
    private struct CircleCenterAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.center]
        }
    }
    static let circleCenter = HorizontalAlignment(CircleCenterAlignment.self)
}

步骤2：编写布局代码 #

外层使用VStack，对齐规则设为我们自定义的circleCenter，每组圆形+矩形放在独立的HStack中，仅给圆形设置对齐绑定即可：

struct TargetLayoutView: View {
    var body: some View {
        VStack(alignment: .circleCenter, spacing: 30) {
            // 上方圆形+矩形组
            HStack(spacing: 16) {
                Circle()
                    .fill(.blue)
                    .frame(width: 60, height: 60)
                    // 将圆形的水平中心点绑定到自定义对齐参考线
                    .alignmentGuide(.circleCenter) { dimension in
                        dimension[.center]
                    }
                RoundedRectangle(cornerRadius: 8)
                    .fill(.orange)
                    .frame(width: 220, height: 45)
            }
            
            // 下方圆形+矩形组
            HStack(spacing: 16) {
                Circle()
                    .fill(.blue)
                    .frame(width: 60, height: 60)
                    .alignmentGuide(.circleCenter) { dimension in
                        dimension[.center]
                    }
                RoundedRectangle(cornerRadius: 8)
                    .fill(.orange)
                    .frame(width: 160, height: 45)
            }
        }
        .padding()
    }
}

规则说明 #

• 外层VStack的alignment: .circleCenter参数要求所有子视图按照自定义参考线水平对齐
• 只有圆形设置了alignmentGuide，告知布局系统自己的水平中心点要对齐到参考线，VStack会自动调整两个HStack的水平位置，保证两个圆形始终在同一垂直线上
• 每个HStack默认采用垂直居中对齐，天然实现圆形与对应矩形的纵向中心对齐
• 所有视图尺寸、间距修改后对齐关系自动适配，无需额外调整

内容的提问来源于stack exchange，提问作者Robert Atkins