SwiftUI中如何实现文本框前缘对齐并适配多语言？

针对多语言场景下标签文本长度变化导致输入框无法对齐的问题，推荐以下几种方案：

1. 使用Grid布局（最优解） #

SwiftUI的Grid组件专为行列对齐的布局设计，能自动将同一列的元素对齐，无需手动设置固定宽度，完美适配多语言文本变化。

VStack(spacing: 16) {
    Grid(alignment: .leading, horizontalSpacing: 16) {
        GridRow {
            Text("Format String:")
            HStack {
                TextField("%W.%w%d2", text: $formatString)
                    .foregroundColor(.black)
                    .frame(height: 30)
                    .border(.gray)
                Button {
                    print("Snork!")
                } label: {
                    Image(systemName: "info.circle")
                }
                .foregroundStyle(.tint)
            }
        }
        GridRow {
            Text("Number of passwords:")
            TextField("20", value: $numPasswords, format: .number)
                .foregroundColor(.black)
                .frame(width: 50, height: 30)
                .border(.gray)
        }
    }
    .padding(.horizontal, 20)
}

• Grid(alignment: .leading)确保所有单元格左对齐
• horizontalSpacing控制标签与输入区域的间距
• 外层padding(.horizontal,20)替代原代码中重复的左右Spacer，简化布局
• 第一行的输入框和按钮放入HStack，保证它们在同一内容列内

2. 使用LabeledContent+Form（原生表单风格） #

如果需要系统原生表单样式，LabeledContent结合Form可以自动处理标签与内容的对齐逻辑，适配多语言文本长度，同时自带平台原生样式。

Form {
    LabeledContent("Format String:") {
        HStack {
            TextField("%W.%w%d2", text: $formatString)
                .foregroundColor(.black)
                .frame(height: 30)
                .border(.gray)
            Button {
                print("Snork!")
            } label: {
                Image(systemName: "info.circle")
            }
            .foregroundStyle(.tint)
        }
    }
    LabeledContent("Number of passwords:") {
        TextField("20", value: $numPasswords, format: .number)
            .foregroundColor(.black)
            .frame(width: 50, height: 30)
            .border(.gray)
    }
}

3. 自定义对齐指南（手动实现） #

若不想使用Grid或Form，可通过自定义水平对齐指南，强制两个输入框的前缘对齐到同一基准线（即最长标签的尾部位置）。

// 定义自定义对齐标识
extension HorizontalAlignment {
    private enum LabelTrailing: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.leading]
        }
    }
    static let labelTrailing = HorizontalAlignment(LabelTrailing.self)
}

// 绑定命名空间用于关联视图
@Namespace private var alignmentNamespace

VStack(spacing: 16) {
    HStack(alignment: .center) {
        Text("Format String:")
            .alignmentGuide(.labelTrailing) { $0[.trailing] }
            .matchedGeometryEffect(id: "labelWidth", in: alignmentNamespace)
        TextField("%W.%w%d2", text: $formatString)
            .foregroundColor(.black)
            .frame(height: 30)
            .border(.gray)
        Spacer()
        Button {
            print("Snork!")
        } label: {
            Image(systemName: "info.circle")
        }
        .foregroundStyle(.tint)
    }
    HStack(alignment: .center) {
        Text("Number of passwords:")
            .alignmentGuide(.labelTrailing) { $0[.trailing] }
            .matchedGeometryEffect(id: "labelWidth", in: alignmentNamespace)
        TextField("20", value: $numPasswords, format: .number)
            .foregroundColor(.black)
            .frame(width: 50, height: 30)
            .border(.gray)
        Spacer()
    }
}
.padding(.horizontal, 20)

通过matchedGeometryEffect让两个标签共享宽度，确保输入框的起始位置一致。

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