没有标签的 SwiftUI Picker 视图

Posted 2023-02-24

【中文标题】没有标签的 SwiftUI Picker 视图

【英文标题】：SwiftUI Picker view without label

【发布时间】：2020-08-21 09:50:47

【问题描述】：

编辑：我尝试在表单之外使用 WheelPickerStyle，但是我想要的是相同的想法，实际选项而不是标签，而是作为列表。就像在我的表单示例中一样，它非常完美，只是它有一个标签，我必须点击才能到达那里。

我有一个应用程序，它有一个按钮，可以将我重定向到另一个视图，如下所示：

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)
                    

现在，这个其他视图应该是一个列表，您可以从中选择一个，并且只能选择一个元素。

我试过这样做：

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

但是，我的问题是这向我显示了一个带有选择器和隐藏标签的视图。我根本不想要这个标签，我希望选择器选项在我进入这个视图时立即显示，而不必点击标签。

我怎样才能做到这一点？这是适用于 ios 13+ 如果可能的话，另一个选择是如果我能以某种方式使第一个按钮成为选择器选项视图的触发器，但我仍然不知道如何实现这一点。

【参考方案1】：

这是Form 呈现默认样式选择器的一种方式。尝试改用WheelPickerStyle

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

【讨论】：

我尝试在表单之外使用 WheelPickerStyle，但是我想要的是相同的想法，实际选项而不是标签，而是作为列表。就像在我的表单示例中一样，它非常完美，只是它有一个标签，我必须点击才能到达那里。

我是否必须列出一个列表并以某种方式创建逻辑让您选择一个？

作为变体，为什么不呢？

我只是觉得这个想法很基础。我点击了一个图像按钮，然后会出现一个选项列表，我可以在其中选择一个。默认情况下，如果没有 swiftui 上的自定义逻辑，我不能这样做吗？

参见 List with selection ***.com/a/61838512/12299030 的示例（它实际上比您需要的要宽，但对于演示来说还可以）。

【参考方案2】：

初始化时可以设置label属性为EmptyView()。

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

如果您对label 属性使用空的Text，它会显示一个空栏，至少在使用pickerStyle(.inline) 时是这样。如果您使用EmptyView，则没有空栏，您可以显示没有标签的选择器。

【参考方案3】：

您可以将菜单用作标签

  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)

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。