As you see below on the screen shot below, my picker shows one line: when I tap on it, I have the full length list of values menu popup.
How to make the picker displays more than one line in the original view (before I tap on it)?
// == Fuel picker action sheet
if $showFuelPickerActionSheet.wrappedValue {
GeometryReader { gr in
VStack {
VStack {
Text("Change fuel")
.font(.headline)
// .foregroundColor(.gray)
.padding(.top, 10)
Text("Pick the fuel you want to see the stats about:")
.padding(.top, 5)
Picker(
"Fuel picker",
selection: $pickedFuel
) {
Text("0").id("0")
Text("1").id("1")
Text("2").id("2")
Text("3").id("3")
Text("4").id("4")
Text("5").id("5")
}
// .scaledToFit()
.frame(
maxWidth: gr.size.width - 40
// ,minHeight: gr.size.width - 40
)
// .labelsHidden()
}
.background(RoundedRectangle(cornerRadius: 10)
.foregroundColor(Color.white).shadow(radius: 1))
//VStack {
Button(action: {
//debugPrint("Done Selected")
showFuelPickerActionSheet = false
}) {
Text("Done").fontWeight(Font.Weight.bold)
}
.padding()
.frame(maxWidth: gr.size.width - 40)
.background(RoundedRectangle(cornerRadius: 10)
.foregroundColor(Color.white).shadow(radius: 1))
//}
}.position(
x: gr.size.width / 2 ,
y: gr.size.height - 80
)
}
} // if $showFuelPickerActionSheet.wrappedValue
>Solution :
Probably you wanted .wheel
style (no-one of other style expanded)
Picker(
"Fuel picker",
selection: $pickedFuel
) {
Text("0").id("0")
Text("1").id("1")
Text("2").id("2")
Text("3").id("3")
Text("4").id("4")
Text("5").id("5")
}
.pickerStyle(.wheel) // << here !!