SwiftUI中如何对齐Form内TextField的输入区域

你遇到的问题是因为左侧标签文本长度不一致，导致HStack里的TextField起始位置无法对齐。下面给你几种实用的解决办法：

方法一：给标签文本设置固定宽度 #

直接给左侧的Text设置固定宽度，让所有标签占据相同的横向空间，这样TextField自然就对齐了。调整宽度值适配你的界面即可：

NavigationView {
    Form {
        Section {
            HStack {
                Text("Full Name")
                    .fontWeight(.semibold)
                    .frame(width: 100, alignment: .leading) // 固定宽度
                TextField("Required", text: $companyName)
            }
            HStack {
                Text("JobTitle")
                    .fontWeight(.semibold)
                    .frame(width: 100, alignment: .leading) // 统一宽度
                TextField("Required", text: $companyName)
            }
        }
    }
    .navigationTitle(Text("Title"))
}

方法二：用对齐指南自动适配最长标签 #

如果不想固定宽度，想让标签宽度自动适配最长的文本，可以自定义HStack的对齐规则：

// 定义自定义对齐标识
private enum LabelAlignment: AlignmentID {
    static func defaultValue(in context: ViewDimensions) -> CGFloat {
        context[.leading]
    }
}

extension HorizontalAlignment {
    static let labelAlignment = HorizontalAlignment(LabelAlignment.self)
}

// 修改Form中的HStack
NavigationView {
    Form {
        Section {
            HStack(alignment: .center) {
                Text("Full Name")
                    .fontWeight(.semibold)
                    .alignmentGuide(.labelAlignment) { $0[.trailing] }
                TextField("Required", text: $companyName)
                    .alignmentGuide(.labelAlignment) { $0[.leading] }
            }
            HStack(alignment: .center) {
                Text("JobTitle")
                    .fontWeight(.semibold)
                    .alignmentGuide(.labelAlignment) { $0[.trailing] }
                TextField("Required", text: $companyName)
                    .alignmentGuide(.labelAlignment) { $0[.leading] }
            }
        }
    }
    .navigationTitle(Text("Title"))
}

这种方式会让所有标签的右侧对齐，TextField的左侧也会随之对齐，同时标签宽度会自动匹配最长的那一个。

方法三：iOS 16+ 使用Grid布局（更简洁） #

如果你的App只需要支持iOS16及以上版本，用Grid布局可以更轻松实现对齐，Grid会自动让同一列的元素对齐：

NavigationView {
    Form {
        Section {
            Grid(alignment: .leading) {
                GridRow {
                    Text("Full Name")
                        .fontWeight(.semibold)
                    TextField("Required", text: $companyName)
                }
                GridRow {
                    Text("JobTitle")
                        .fontWeight(.semibold)
                    TextField("Required", text: $companyName)
                }
            }
        }
    }
    .navigationTitle(Text("Title"))
}

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