SwiftUI：设置选取器行高

Posted 2023-02-24

【中文标题】SwiftUI：设置选取器行高

【英文标题】：SwiftUI: Setting Picker line height

【发布时间】：2020-05-06 01:33:31

【问题描述】：

对于大字体，Picker 中的行是重叠的。如何更改Picker's 行高？ （提示：.lineSpacing 修饰符不会这样做。）

另见

这个问题与Ejaaz 的问题类似，但他的问题至今没有答案。

问题

守则

以下可运行代码产生上述结果。我真的不想要不同大小的线条，我只想让大字体适合。我试过插入Spacers，在这里和那里添加.frame修饰符，.lineSpacing，padding() ...也许只是没有找到合适的组合？

struct ContentView: View 
    @State private var selected = 0

    var body: some View 
        Picker(selection: self.$selected, label: Text("Letters")) 
            Text("A").font(.system(size: 30))
            Text("B").font(.system(size: 40))
            Text("C").font(.system(size: 50))
            Text("D").font(.system(size: 60))
            Text("E").font(.system(size: 70))
            Text("F").font(.system(size: 80))
        
    

【参考方案1】：

你必须将 UIPickerView 包装在 UIVieweRepresentable 中，然后使用

 func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat 

改变你的行高。

例子：（它只是展示了如何改变行高，你仍然需要为你的内容扩展它......）

struct PickerView: UIViewRepresentable 
    var data: [[String]]
    @Binding var selections: Int

    //makeCoordinator()
    func makeCoordinator() -> PickerView.Coordinator 
        Coordinator(self)
    

    //makeUIView(context:)
    func makeUIView(context: UIViewRepresentableContext<PickerView>) -> UIPickerView 
        let picker = UIPickerView(frame: .zero)

        picker.dataSource = context.coordinator
        picker.delegate = context.coordinator

        return picker
    

    //updateUIView(_:context:)
    func updateUIView(_ view: UIPickerView, context: UIViewRepresentableContext<PickerView>) 
//        for i in 0...(self.selections.count - 1) 
//            view.selectRow(self.selections[i], inComponent: i, animated: false)
//        
    

    class Coordinator: NSObject, UIPickerViewDataSource, UIPickerViewDelegate 
        var parent: PickerView

        //init(_:)
        init(_ pickerView: PickerView) 
            self.parent = pickerView
        

        func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat 
            return 80
        

        //numberOfComponents(in:)
        func numberOfComponents(in pickerView: UIPickerView) -> Int 
            return self.parent.data.count
        

        //pickerView(_:numberOfRowsInComponent:)
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int 
            return self.parent.data[component].count
        

        //pickerView(_:titleForRow:forComponent:)
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? 
            return self.parent.data[component][row]
        

        //pickerView(_:didSelectRow:inComponent:)
        func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) 
     //       self.parent.selections[component] = row
        
    

【讨论】：

谢谢，我用UIViewRepresentable 取得了很好的效果，用复杂的行为包装了东西。但我希望会有一个原生的 SwiftUI 修饰符。

因为似乎（还没有？）有一个 SwiftUI 修饰符，所以我将您的回复称为答案。它可以正确构建和运行，谢谢。

@Chris 虽然这对高度很有效，但我不知道为什么，但是选择器的宽度并没有增加。