SwiftUI如何让VStack中红矩形水平居中且绿圆贴其左边缘

可以借助Alignment Guides实现需求，全程无需硬编码任何位置数值，修改后的完整代码如下：

import SwiftUI

// 自定义水平对齐标识
extension HorizontalAlignment {
    private enum RedRectCenterAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.center]
        }
    }
    static let redRectCenter = HorizontalAlignment(RedRectCenterAlignment.self)
}

struct AlignmentTest: View {
    @State var op: Double = 1
    
    var body: some View {
        // VStack使用自定义对齐作为水平对齐基准
        VStack(alignment: .redRectCenter) {
            HStack(spacing: 0) { // spacing设为0保证圆形和矩形无间隙紧贴
                Circle()
                    .fill(.green)
                    .opacity(op)
                    .frame(width: 50, height: 50)
                
                Rectangle()
                    .fill(.red)
                    .frame(width: 150, height: 50)
                    // 指定红色矩形的水平中心为自定义对齐的基准点
                    .alignmentGuide(.redRectCenter) { dimensions in
                        dimensions[HorizontalAlignment.center]
                    }
            }
        }
    }
}

实现逻辑 #

• 自定义水平对齐规则，默认取值为视图自身的水平中心
• 将VStack的水平对齐方式设置为自定义规则，所有子视图都会按照该规则完成对齐
• 给红色矩形添加对齐引导，指定它的水平中心为对齐基准点，VStack会自动将该基准点与自身的水平中心对齐，实现红色矩形在VStack内水平居中
• HStack默认采用leading对齐，将间距设为0后绿色圆形会自动紧贴红色矩形的左边缘

该方案适配性极强，后续如果调整圆形、矩形的尺寸，布局效果会自动适配，不需要修改任何布局逻辑。

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