SwiftUI布局求助：如何让VStack内容与HStack文本上下对齐？

问题场景 #

现有如下SwiftUI代码：

HStack {
    Text("AAA")
        .font(.system(size: 60))
    VStack {
        Text("BBB")
        Text("CCC")
    }
}

需要实现：VStack中的BBB顶部与HStack内AAA的顶部对齐，CCC底部与AAA的底部对齐。

可行解决方案 #

方案一：匹配高度+内部空间撑开（简单直观）

通过预计算大字体文本的高度，让VStack高度与之匹配，再用Spacer()撑开内部空间，实现上下对齐：

struct ContentView: View {
    private let largeText = Text("AAA").font(.system(size: 60))
    
    var body: some View {
        HStack(alignment: .top) {
            largeText
            VStack(spacing: 0) {
                Text("BBB")
                Spacer()
                Text("CCC")
            }
            // 让VStack高度与AAA完全一致
            .frame(height: largeText.sizeThatFits().height)
        }
    }
}

方案二：自定义对齐指南（精准控制）

通过自定义对齐基准，将AAA的顶部/底部与BBB的顶部、CCC的底部绑定，实现精准对齐：

extension HorizontalAlignment {
    private enum TopBottomAlign: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[VerticalAlignment.top]
        }
    }
    
    static let topBottomAlign = HorizontalAlignment(TopBottomAlign.self)
}

struct ContentView: View {
    var body: some View {
        HStack(alignment: .topBottomAlign) {
            Text("AAA")
                .font(.system(size: 60))
                .alignmentGuide(.topBottomAlign) { $0[.top] }
                .alignmentGuide(.topBottomAlign) { $0[.bottom] }
            VStack {
                Text("BBB")
                    .alignmentGuide(.topBottomAlign) { $0[.top] }
                Text("CCC")
                    .alignmentGuide(.topBottomAlign) { $0[.bottom] }
            }
        }
    }
}

方案说明 #

• 方案一操作简单，适合布局逻辑清晰的场景，通过高度匹配+Spacer自动分配空间快速实现需求。
• 方案二更灵活，适合复杂布局场景，通过自定义对齐基准可以精准控制任意视图的对齐位置。

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