SwiftUI 不带 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.

Answer 1

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

Answer 2

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)

Answer 3

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.