macOS 上的 Swiftui 表单标签对齐

Question

我正在 macOS 上的 SwiftUI 中构建一个简单的表单，但是一旦添加了选择器，布局就搞砸了。

这是我的代码：

var body: some View {
        GeometryReader { geometry in
            Form {
                HStack {
                    Text("Label")
                        .frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)

                    TextField("", text: $field1)
                }

                HStack {
                    Text("Long Label")
                        .frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
                    TextField("", text: $field2)
                }

//                HStack {
//                    Text("Picker")
//                        .frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
//
//                    Picker("", selection: $selectedColor) {
//                        ForEach(colors, id: \.self) {
//                            Text($0)
//                        }
//                    }
//                }

            }
            .padding(20)
        }
    }
}

这是出来的形式：

添加一个简单的选择器，布局变成：

而且我无法保持所有标签对齐。我尝试向选择器和 HStack 添加一个框架，但没有任何帮助。

我也尝试过：

 Picker(selection: $selectedColor, label: EmptyView() {
    ...
 }

和：

 Picker(selection: $selectedColor, label: Text("Picker") {
                        ...
 }

得到相同的结果。

如何保持标签对齐？

Answer 1

添加labelsHidden()到您的Picker：

 HStack {
   Text("Picker").frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
                    
   Picker("", selection: $selectedColor) {
                        ForEach(colors, id: \.self) {
                            Text($0)
                        }
   }.labelsHidden()
}