はしばみあきら blog

プログラミングアウトプットするブログ。202010スタート

【SwiftUI】ホイールピッカーを作る

今回はホイールピッカーを作っていきます。

コロコロと文字列が動くあれです。

Pickerでホイールピッカーを表示

ライブラリパネルを開き「Picker」をドロップする

struct ContentView: View {
    var body: some View {
        VStack{
            Picker(selection: .constant(1), label: Text("Picker")) {
                Text("1").tag(1)
                Text("2").tag(2)
            }
        }
    }
}

初期だとこんな感じですね。

f:id:hashibamiakira:20210320000332p:plain

表示させると「1」と「2」のホイールが出てきました

表示に合わせて画像を変える

前回 SF Symbols でアイコンを表示できることを知りました

これを組み合わせて、ホイールした内容に合わせて画像を変化させてみます

struct ContentView: View {
    
    // 変数の変更を保持する
    @State private var selectedWether = 0
    
     // アイコン用配列
    let weatherIcons = [
        Image(systemName: "sun.min.fill"),
        Image(systemName: "moon.fill"),
        Image(systemName: "cloud.fill")
    ]
    
    // アイコン色用配列
    let weatherColor = [
        Color.orange,
        Color.yellow,
        Color.gray
    ]
    
    var body: some View {
        VStack{
            Picker(selection: $selectedWether, label: Text("Weather")) {
                // .tagの番号が、selectionに入る
                Text("Sunny").tag(0)
                Text("Moon").tag(1)
                Text("Cloud").tag(2)
            }
            HStack{
                // 配列weatherIcons[]から、選択した.tag番号の画像が引数になる
                weatherIcons[selectedWether]
                    .frame(width: 50, height: 50)
                    // 色も同じく配列weatherColor[]から
                    .foregroundColor(weatherColor[selectedWether])
            }
            .imageScale(.large)
        }
    }
}

f:id:hashibamiakira:20210320003355p:plain

ピッカー内の.tagのカッコ内は選択している部分の数字を、Picker()のselectionに渡します

つまり変数 selectedWether に選択部分の数字が入ります

あとはその値を使い、アイコン用の配列や、配色用の配列から値を引っ張る、と言った感じですね

JSとかReactとかを触っていたからなんとなく雰囲気が掴めてるけど、前提知識なく触るのは大変そうだ

シミュレーションの挙動はこんな感じです

streamable.com

次回はもう少し発展していきます