SwiftUI Picker view without label

Question

EDIT: I tried using the WheelPickerStyle outside of the form, however what I want is the same idea, the actual options instead of the label, but as a list. Just like in my example with the Form, it's perfect except it has a label I have to click to get there.

I have an app which has a button that redirects me to another view like this:

Button(action: {
                        self.isAddDrinkView.toggle()
                    }) {
                        Image(systemName: "plus.circle")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 100, height: 100, alignment: .center)
                            .foregroundColor(.black)
                            .padding(.bottom, 50.0)
                    }

Now, this other view is supposed to be a list from where you could pick one, and only one, element.

I tried doing it like this:

struct AddDrinkView: View {
    @ObservedObject var context: Context
    var body: some View {
        NavigationView{
            Form{
            Picker(selection: $context.selectedItems, label: Text("Select a drink"), content: {
                ForEach(context.items){
                    Text("\($0)")
                }
            }).pickerStyle(DefaultPickerStyle())
            .navigationBarTitle("Select a Drink")
            }.labelsHidden()
        }
    }
}

However, my problem is that this shows me a view with a picker and a hidden label. I don't want this label at all, I'd prefer the picker options to show immediately when I enter this view, without having to click on a label.

How can I achieve this? this is for ios 13+ Another option if possible was if I could somehow make the first button be the trigger for the picker options view, but I still don't know how to achieve this.

user_12299030 · Answer

This a way Form presents default styled picker. Try to use instead WheelPickerStyle

Picker(selection: $context.selectedItems, label: Text("Select a drink"), content: {
    ForEach(context.items){
        Text("\($0)")
    }
}).pickerStyle(WheelPickerStyle())      // << here !!

user_736809 · Answer

You can set the label property when initialising to EmptyView().

Picker(selection: $context.selectedItems, label: EmptyView()) {
    ForEach(colors, id: \.self) {
        Text($0)
    }
}

If you were to use an empty Text for the label property, it would show an empty bar, at least when using pickerStyle(.inline). If you use EmptyView, there is no empty bar and you are able to display a picker without a label.

user_17341659 · Answer

You Can use Menu as Label

  Menu("Drop Your Label Here") {
                    Picker("Please choose a color", selection: $selectedColor)
                    {
                        ForEach(colors, id: \.self) {
                            Text($0)
                        }
                    }
                    
                }
                //.foregroundColor(Color.init("Red"))
                .foregroundColor(Color.red)
            }.frame(width: 300, height: 60)

SwiftUI Picker view without label

3 Answers