SwiftUI Form自定义对齐指南：实现键值文本精准对齐

完全可以通过自定义对齐指南实现这种统一对齐的效果，核心思路是让所有值文本以最长键文本（含冒号）的尾部位置作为对齐基准，具体实现如下：

1. 定义自定义对齐指南 #

首先扩展HorizontalAlignment，创建一个专属的对齐标记，用来捕捉键文本的尾部位置：

extension HorizontalAlignment {
    private enum KeyTrailingAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.leading]
        }
    }
    static let keyTrailing = HorizontalAlignment(KeyTrailingAlignment.self)
}

2. 实现对齐的Form行 #

在Form的每一行中，给键文本绑定自定义对齐指南，同时让值文本对齐到该基准线：

struct AlignedFormView: View {
    // 示例键值对数据
    let formItems: [(key: String, value: String)] = [
        ("姓名", "张三"),
        ("联系电话", "138xxxx1234"),
        ("详细住址", "北京市朝阳区某某街道某某小区1号楼2单元301室"),
        ("电子邮箱", "zhangsan@example.com")
    ]
    
    var body: some View {
        Form {
            ForEach(formItems, id: \.key) { item in
                HStack(alignment: .firstTextBaseline) {
                    // 键文本（含冒号），标记尾部对齐点
                    Text("\(item.key):")
                        .padding(.trailing, 8) // 可选：添加键与值之间的固定间距
                        .alignmentGuide(.keyTrailing) { $0[.trailing] }
                    
                    // 值文本，对齐到自定义的keyTrailing基准线
                    Text(item.value)
                        .alignmentGuide(.leading) { $0[.leading] }
                }
                // 让整行内容以keyTrailing为对齐参考，自动适配最长键的宽度
                .frame(maxWidth: .infinity, alignment: .keyTrailing)
            }
        }
    }
}

关键逻辑说明 #

• 自定义的keyTrailing对齐指南会自动取所有行中最长键文本的尾部位置作为全局对齐基准，确保所有值文本起始位置完全统一。
• HStack使用.firstTextBaseline对齐，保证键和值的文本基线在同一水平线上，避免不同字号导致的错位。
• 可选的.padding(.trailing, 8)可以调整键与值之间的固定间距，让布局更美观。

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