SwiftUI 如何实现Form跨Section的TextField前缘对齐

你之前的自定义对齐规则仅在同一父容器的同层级子视图之间生效，SwiftUI的Form中每个Section都是独立布局容器，不同Section的视图不共享对齐上下文，因此跨Section的对齐引导无法生效。

推荐使用PreferenceKey测量所有标签的最大宽度后统一赋值的方案，完美适配Form的原生布局逻辑，完整实现代码如下：

import SwiftUI

// 用于收集全局最大标签宽度的PreferenceKey
struct MaxLabelWidthKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

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

struct ContentView: View {
    // 存储全局最大标签宽度
    @State private var maxLabelWidth: CGFloat = 0
    
    var body: some View {
        Form {
            Section(header: Text("Section One")) {
                VStack(alignment: .leadingEdge) {
                    HStack {
                        Text("Primary")
                            // 测量当前标签宽度上报
                            .background(GeometryReader { geo in
                                Color.clear.preference(key: MaxLabelWidthKey.self, value: geo.size.width)
                            })
                            // 统一设置最小宽度，文本右对齐
                            .frame(minWidth: maxLabelWidth, alignment: .trailing)
                        TextField("", text: .constant(""))
                            .frame(maxWidth: 75)
                            .alignmentGuide(.leadingEdge) { $0[.leading] }
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                    HStack {
                        Text("Secondary")
                            .background(GeometryReader { geo in
                                Color.clear.preference(key: MaxLabelWidthKey.self, value: geo.size.width)
                            })
                            .frame(minWidth: maxLabelWidth, alignment: .trailing)
                        TextField("", text: .constant(""))
                            .frame(maxWidth: 75)
                            .alignmentGuide(.leadingEdge) { $0[.leading] }
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                }
            }
            Section(header: Text("Section Two")) {
                VStack(alignment: .leadingEdge) {
                    HStack {
                        Text("Milk")
                            .background(GeometryReader { geo in
                                Color.clear.preference(key: MaxLabelWidthKey.self, value: geo.size.width)
                            })
                            .frame(minWidth: maxLabelWidth, alignment: .trailing)
                        TextField("", text: .constant(""))
                            .frame(maxWidth: 75)
                            .alignmentGuide(.leadingEdge) { $0[.leading] }
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                    HStack {
                        Text("Cheesecake")
                            .background(GeometryReader { geo in
                                Color.clear.preference(key: MaxLabelWidthKey.self, value: geo.size.width)
                            })
                            .frame(minWidth: maxLabelWidth, alignment: .trailing)
                        TextField("", text: .constant(""))
                            .frame(maxWidth: 75)
                            .alignmentGuide(.leadingEdge) { $0[.leading] }
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                }
            }
        }
        // 监听全局最大标签宽度更新
        .onPreferenceChange(MaxLabelWidthKey.self) { maxWidth in
            maxLabelWidth = maxWidth
        }
        // 若需要TextField整体对齐到视图中心，只需给每个包裹标签和TextField的HStack添加修饰符：
        // .frame(maxWidth: .infinity, alignment: .center)
    }
}

如果要进一步简化代码，可以把带测量逻辑的标签封装成自定义视图，避免重复写测量和frame修饰符。

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