Swiftui Form Label alignment on macOS - macos

Question

I am building a simple form in SwiftUI for macOS but once I add a picker the layout is screwed up.
This is my code:
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)
}
}
}
and this is the form which comes out:
Adding a simple picker, the layout becomes:
and I am not able to keep all the labels aligned. I have tried to add a frame to the picker and to the HStack but nothing helps.
I have also tried with:
Picker(selection: $selectedColor, label: EmptyView() {
...
}
and:
Picker(selection: $selectedColor, label: Text("Picker") {
...
}
getting the same result.
How do I keep the labels aligned?

Answer 1

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

Answer 2

I think #jnpdx's answer is better but this is another way.
Read comments in the code:
Embed 3 HStacks into a VStack
Change minWidth to 0.24
import SwiftUI
struct ContentView: View {
var body: some View {
GeometryReader { geometry in
Form {
// Embed 3 HStacks into a VStack
VStack {
HStack {
Text("Label")
.frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
TextField("label", text: .constant("")).labelStyle(IconOnlyLabelStyle())
}
HStack {
Text("Long label")
.frame(minWidth: 0.25 * geometry.size.width, alignment: .leading)
TextField("long Label", text: .constant(""))
}
HStack {
Text("Picker")
// Change minWidth to 0.24
.frame(minWidth: 0.24 * geometry.size.width, alignment: .leading)
Picker("", selection: .constant(Color.red)) {
ForEach([Color.red, Color.green, Color.blue], id: \.self) {
Text($0.description)
}
}
}
}
}
.padding(20)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Answer 3

This answer is much better than accepted answer: https://stackoverflow.com/a/73946863/202179
In short there is a LabeledContent for that purpose now.