我在做一个表单，让用户输入一些内容。下面是我的代码：

import SwiftUI

struct ContentView: View {
    @State private var searchString = "TEST"
    @State private var searchValue = 0.0
    @State private var tolerance = 10.0

    var body: some View {
        Form {
            Section {
                LabeledContent("Search String:") {
                    TextField("", text: $searchString)
                }
                .labeledContentStyle(.searchLabeledContentStyle)
            }

            Spacer()

            Section {
                LabeledContent("Search Value:") {
                    TextField("", value: $searchValue, format: .number)
                }
                .labeledContentStyle(.searchLabeledContentStyle)

                LabeledContent("Tolerance:") {
                    HStack {
                        TextField("", value: $tolerance, format: .number)

                        Picker("", selection: .constant(1)) {
                            Text("foo")
                                .tag(1)
                            Text("bar")
                                .tag(0)
                        }
                        .pickerStyle(.menu)
                        .labelsHidden()
                    }
                }
                .labeledContentStyle(.searchLabeledContentStyle)
            }

            Spacer()
        }
        .padding()
    }
}

extension LabeledContentStyle where Self == SearchLabeledContentStyle {
    static var searchLabeledContentStyle: Self {
        Self()
    }
}

struct SearchLabeledContentStyle: LabeledContentStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack(alignment: .firstTextBaseline) {
            configuration.label
                .fontWeight(.semibold)
            configuration.content
                .foregroundStyle(.secondary)
            Spacer()
        }
    }
}

效果如下：

现在我希望底部的两行变短，于是我尝试在 LabeledContent("Search Value:" ){...} 和 LabeledContent("Tolerance:") { ... } 上添加 .frame(width: 300)。但现在右侧对齐就不再一致了：

我要怎么解决？

解决方案

我认为这里发生的情况是：

在 LabeledContent 上放置 frame，意味着带标签内容的标签部分也会共享该框架的一部分。由于“Tolerance”的宽度比“Search Value”窄，因此用于“Tolerance”的文本字段+ 选择器比用于“Search Value”的文本字段要宽。

如果你只把 .frame(width: 300) 放在带标签内容的“内容”部分上，就能实现所需的布局。

LabeledContent("Search Value:") {
    TextField("", value: $searchValue, format: .number)

    .frame(width: 300)
}

LabeledContent("Tolerance:") {
    HStack {
        TextField("", value: $tolerance, format: .number)

        Picker("", selection: .constant(1)) {
            Text("foo")
                .tag(1)
            Text("bar")
                .tag(0)
        }
        .pickerStyle(.menu)
        .labelsHidden()
    }
    .frame(width: 300)
}

顺便说一句：你可以一次性将 labeledContentStyle 应用于整个 Form，而不是逐个应用到每个 LabeledContent。