SwiftUI中如何让HStack内视图与VStack中视图精准对齐？

现有代码 #

struct ContentView: View {
    var body: some View {
        VStack {
            Color.black
                .frame(width: 130, height: 30)
            
            HStack(spacing: 17) {
                ChildView()
                ChildView()
                ChildView()
                ChildView()
            }
        }
    }
}

struct ChildView: View {
    var body: some View {
        VStack(spacing: 2) {
            Color.red
                .frame(width: 15, height: 15)
            
            Text("Title")
                .font(.system(size: 10))
        }
    }
}

当前实际效果 #

期望效果 #

需求说明：希望拉伸HStack，让第一个ChildView里的红色方块左边缘与上方黑色矩形左边缘对齐，最后一个ChildView里的红色方块右边缘与黑色矩形右边缘对齐。尝试用自定义alignmentGuide实现，但遇到了困难。

解决方案：自定义对齐指南实现精准对齐 #

核心思路是通过自定义对齐标识符，把上方黑色矩形的边缘和下方ChildView的红色方块边缘绑定，同时让HStack撑满可用空间，自动适配间距。

步骤1：定义自定义对齐标识符

extension HorizontalAlignment {
    private enum RedBlockEdge: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.leading]
        }
    }
    
    // 自定义对齐线，用于绑定红色方块与黑色矩形的边缘
    static let redBlockAlign = HorizontalAlignment(RedBlockEdge.self)
}

步骤2：修改布局结构，绑定对齐关系

调整ContentView的VStack和HStack，通过对齐指南指定边缘绑定规则：

struct ContentView: View {
    var body: some View {
        VStack(alignment: .redBlockAlign) {
            // 黑色矩形：绑定自身的左右边缘到自定义对齐线
            Color.black
                .frame(width: 130, height: 30)
                .alignmentGuide(.redBlockAlign) { $0[.leading] }
                .alignmentGuide(.trailing) { $0[.trailing] }
            
            // HStack撑满宽度，首尾子视图绑定对应边缘
            HStack(spacing: 17) {
                ChildView()
                    .alignmentGuide(.redBlockAlign) { $0[.leading] }
                
                ChildView()
                ChildView()
                
                ChildView()
                    .alignmentGuide(.trailing) { $0[.trailing] }
            }
            .frame(maxWidth: .infinity)
        }
    }
}

这样修改后，VStack会以自定义的redBlockAlign对齐线为基准，让第一个ChildView的红色方块左边缘和黑色矩形左边缘对齐，最后一个ChildView的红色方块右边缘和黑色矩形右边缘对齐，同时HStack自动拉伸填充宽度，中间子视图保持原有间距。

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