macOS应用Inspector中TextField左对齐问题：如何实现完美对齐？

问题场景：开发macOS应用时，在Inspector窗口的.sidebar样式List中，两个TextField的左边缘无法对齐（效果如图）。

问题原因 #

原代码中第二个LabeledContent被嵌套在HStack内作为List的行元素，而第一个LabeledContent是直接作为List行。两者的布局上下文（包括内边距、对齐基准）不一致，导致TextField边缘错位。

修复方案 #

将第二个List行的结构调整为和第一个一致：用LabeledContent包裹整个内容区域（TextField+Picker的HStack），让两个列表行共享相同的布局规则。

修改后的完整代码 #

struct ContentView: View {
    @State private var inspectorShown = true
    @State private var searchString1 = ""
    @State private var searchString2 = ""
    @State private var unit: Unit = .m

    enum Unit: String, CaseIterable {
        case m = "m"
        case cm = "cm"
        case yard = "yard"
    }

    var body: some View {
        Text("Main Content")
            .inspector(isPresented: $inspectorShown) {
                List {
                    LabeledContent("Search 1:") {
                        TextField("", text: $searchString1)
                            .textFieldStyle(.roundedBorder)
                            .controlSize(.small)
                    }
                    .frame(minWidth: 150)

                    // 调整后的第二个列表行
                    LabeledContent("Search 2:") {
                        HStack {
                            TextField("", text: $searchString2)
                                .textFieldStyle(.roundedBorder)
                                .controlSize(.small)
                            Picker("", selection: $unit) {
                                ForEach(Unit.allCases, id: \.self) { unit in
                                    Text(unit.rawValue)
                                }
                            }
                            .pickerStyle(.menu)
                            .controlSize(.small)
                        }
                    }
                    .frame(minWidth: 150)
                }
                .listStyle(.sidebar)
            }
    }
}

补充说明 #

如果需要更精细的对齐控制，还可以给两个LabeledContent的内容区域统一设置.alignmentGuide，但上述调整已经能通过统一布局上下文解决大部分对齐问题。

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