Using the Picker in a Form renders the label as @Merlin52 pointed out. The Form really takes over your design though, which is nice but not when you need to customize it. Here's another sample with a screenshot:
struct ContentView: View {
var fruits = ["Banana","Apple", "Peach", "Watermelon", "Grapes" ]
@State private var selectedFruit = 0
var body: some View {
Form {
// Variation 1
Picker(selection: $selectedFruit, label: Text("Select Favorite Fruit")) {
ForEach(0..<fruits.count, id: \.self) {
Text(self.fruits[$0])
}
}
// Variation 2
Picker(selection: $selectedFruit) {
ForEach(0..<fruits.count, id: \.self) {
Text(self.fruits[$0])
}
} label: {
HStack {
Text("Favorite Fruit")
Divider()
Text(fruits[selectedFruit])
}
}
// Variation 3
Menu {
ForEach(0..<fruits.count, id: \.self) {
Text(self.fruits[$0])
}
} label: {
HStack {
Text("Favorite Fruit")
Divider()
Text(fruits[selectedFruit])
}
}
}
.pickerStyle(.menu)
}
}
Here's how everything looks like when I nest everything in a VStack instead of a Form:
Notice I added a Menu in there, which seems like the behaviour the OP is expecting. Shouldn't the Picker mimic that behaviour when modified with a MenuPickerStyle? This would mean the label parameter could be optional in the Picker initializer (so it can default to displaying the selected row). Repurposing a Menu as a picker is the painful alternative in the meantime.
