SwiftUIで複数行のPickerを作成する

2020年1月14日

UIPickerView のような複数行の Picker を作成する方法です。 UIPickerView と使い勝手がかなり異なり、戸惑いました。

Multi-Component Picker Sample

参考: Multi-Component Picker (UIPickerView) in SwiftUI

追記 iOS15では compositingGroup を追記する必要があります。

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var selectedHour = 8
    @State private var selectedMinute = 30
    
    var body: some View {
        GeometryReader { geometry in
            HStack {
                Picker(selection: self.$selectedHour, label: EmptyView()) {
                    ForEach(0 ..< 24) {
                        Text("\($0)")
                    }
                }.pickerStyle(WheelPickerStyle())
                    .onReceive([self.selectedHour].publisher.first()) { (value) in
                        print("hour: \(value)")
                }.labelsHidden()
                    .frame(width: geometry.size.width / 2, height: geometry.size.height)
                    .clipped()
                
                Picker(selection: self.$selectedMinute, label: EmptyView()) {
                    ForEach(0 ..< 60) {
                        Text("\($0)")
                    }
                }.pickerStyle(WheelPickerStyle())
                    .onReceive([self.selectedMinute].publisher.first()) { (value) in
                        print("minute: \(value)")
                }.labelsHidden()
                    .frame(width: geometry.size.width / 2, height: geometry.size.height)
                    .clipped()
            }
        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}