How it comes the picker shows only one line?

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)?

enter image description here

            // == 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 !!

Leave a Reply