无法使用 SwiftUI 使选取器居中

Posted 2023-02-24

【中文标题】无法使用 SwiftUI 使选取器居中

【英文标题】：Unable to center a Picker using SwiftUI

【发布时间】：2019-12-11 19:53:49

【问题描述】：

我正在尝试在 SwiftUI 中创建一个选择器，并且在功能上它工作得很好。但无论出于何种原因，它都会将标题挤压到选择器的左侧，但我只想让选择器在视图中居中。

这是我的代码：

import SwiftUI

struct FancyPicker: View 
    let name: String
    let options: [String]
    let doneText = "Done"
    let onSelection: (String)->Void

    @State private var selection = 0

    var body: some View 
        VStack 
            HStack 
                Text(name)
                Spacer()
                Button(action: 
                    self.onSelection(self.options[self.selection])
                , label: 
                    Text(doneText)
                )
            .padding()

            Picker(selection: $selection, label: EmptyView()) 
                ForEach(0 ..< options.count)  index in
                    Text(self.options[index]).tag(index)
                
            
        
    


struct FancyPicker_Previews: PreviewProvider 
    static var previews: some View 
        FancyPicker(name: "Test Picker", options: ["One", "Two", "Three"])  selection in
            print("Selected \(selection)")
        
    

您会注意到我将选择器标签设置为 EmptyView，输出如下所示：

有没有办法摆脱左侧丑陋的填充？选择器上方和下方还有额外的丑陋填充，但我可以再担心......

【参考方案1】：

使用.labelsHidden() 隐藏选取器的标签。

即使标签是隐藏的，我还是建议添加一个描述性标签，以便屏幕阅读器可以使用该标签。

(credit)

【参考方案2】：

您必须隐藏标签才能使选择器居中。您还可以编辑高度并将其剪辑为具有自定义选择器高度。

var body: some View 
  VStack 

    Picker(selection: $selection, label: Text("") 
      ForEach(0 ..< options.count) 
        Text(self.options[$0]).tag($0)
      
    
    .labelsHidden()
    .frame(height: 50)
    .clipped()
  

【讨论】：

最终使用它没有高度和没有剪裁，因为我认为最终结果更干净 - 但现在看起来好多了，谢谢！

【参考方案3】：

你必须隐藏 PickerView 的标签。

 Picker(selection: $selection, label: EmptyView()) 
            ForEach(0 ..< options.count)  index in
                Text(self.options[index]).tag(index)
            
        .labelsHidden()