SwiftUI中的多组件选择器(UIPickerView) [英] Multi-Component Picker (UIPickerView) in SwiftUI

问题描述

我正在尝试向SwiftUI应用添加三成分选择器(UIPickerView)(在传统的UIKit应用中，数据源将从numberOfComponents方法返回3)，但是我找不到任何地方的一个例子.

I'm trying to add a three-component Picker (UIPickerView) to a SwiftUI app (in a traditional UIKit app, the data source would return 3 from the numberOfComponents method), but I can't find an example of this anywhere.

我曾尝试添加一个由三个单一组件Picker组成的HStack，但是如果它们全部都属于一个Picker，则其透视图将大相径庭.

I've tried adding an HStack of three single-component Pickers, but the perspective is off from what it would be if they were all part of a single Picker.

推荐答案

纯正SwiftUI中的更新答案-在此示例中，数据的类型为String.

Updated answer in pure SwiftUI- in this example the data is of type String.

在 Xcode 11.1 上进行了测试-可能不适用于以前的版本.

Tested on Xcode 11.1 - may not work on previous versions.

struct MultiPicker: View  {

    typealias Label = String
    typealias Entry = String

    let data: [ (Label, [Entry]) ]
    @Binding var selection: [Entry]

    var body: some View {
        GeometryReader { geometry in
            HStack {
                ForEach(0..<self.data.count) { column in
                    Picker(self.data[column].0, selection: self.$selection[column]) {
                        ForEach(0..<self.data[column].1.count) { row in
                            Text(verbatim: self.data[column].1[row])
                            .tag(self.data[column].1[row])
                        }
                    }
                    .pickerStyle(WheelPickerStyle())
                    .frame(width: geometry.size.width / CGFloat(self.data.count), height: geometry.size.height)
                    .clipped()
                }
            }
        }
    }
}

演示:

struct ContentView: View {

    @State var data: [(String, [String])] = [
        ("One", Array(0...10).map { "\($0)" }),
        ("Two", Array(20...40).map { "\($0)" }),
        ("Three", Array(100...200).map { "\($0)" })
    ]
    @State var selection: [String] = [0, 20, 100].map { "\($0)" }

    var body: some View {
        VStack(alignment: .center) {
            Text(verbatim: "Selection: \(selection)")
            MultiPicker(data: data, selection: $selection).frame(height: 300)
        }
    }

}

结果:

这篇关于SwiftUI中的多组件选择器(UIPickerView)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！