SwiftUI：如何在HStack中对齐多行文本、按钮与Toggle标签的顶部行

我编写了如下SwiftUI代码：

struct ContentView: View {
    @State var isOn: Bool = false

    var body: some View {
        HStack(alignment: .top) {
            Toggle(isOn: $isOn) {
                Text("Hello")
            }

            Text("The quick brown fox jumped over the lazy dog")

            Spacer()

            Button("Go") {
                print("Knock knock.")
            }
            .padding()
        }
        .padding()
    }
}

当前布局下，多行文本的首行、按钮“Go”无法和Toggle的标签“Hello”顶部对齐，目前我用硬编码的.offset()手动调整，但这种方式不优雅，修改字体大小后布局会失效。想找到无需硬编码值的正确实现方法，SwiftUI的对齐特性能否实现这一需求？

SwiftUI的自定义对齐指南就能轻松解决这个问题，完全不用硬编码偏移值，具体做法如下：

1. 定义自定义对齐基准 #

先创建一个自定义的对齐键，用来指定我们要对齐的顶部基准线：

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

2. 给需要对齐的视图绑定基准 #

把Toggle的标签、多行文本、按钮的顶部都绑定到这个自定义对齐基准上，同时将HStack的对齐方式改为这个自定义基准：

修改后的完整代码：

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

struct ContentView: View {
    @State var isOn: Bool = false

    var body: some View {
        HStack(alignment: .labelTop) {
            Toggle(isOn: $isOn) {
                Text("Hello")
                    .alignmentGuide(.labelTop) { $0[.top] }
            }

            Text("The quick brown fox jumped over the lazy dog")
                .alignmentGuide(.labelTop) { $0[.top] }

            Spacer()

            Button("Go") {
                print("Knock knock.")
            }
            .padding()
            .alignmentGuide(.labelTop) { $0[.top] }
        }
        .padding()
    }
}

3. 额外优化（可选） #

如果Toggle自带的内边距影响了对齐精度，可以给Toggle加上.fixedSize()让它紧凑显示，对齐效果会更精准：

Toggle(isOn: $isOn) {
    Text("Hello")
        .alignmentGuide(.labelTop) { $0[.top] }
}
.fixedSize()

这种方式不管你怎么修改字体大小、切换系统样式，所有目标视图的顶部都会精准对齐，完全不用依赖硬编码的偏移量。

内容的提问来源于stack exchange，提问作者meaning-matters