【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) } } } }
初期だとこんな感じですね。
表示させると「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) } } }
ピッカー内の.tagのカッコ内は選択している部分の数字を、Picker()のselectionに渡します
つまり変数 selectedWether に選択部分の数字が入ります
あとはその値を使い、アイコン用の配列や、配色用の配列から値を引っ張る、と言った感じですね
JSとかReactとかを触っていたからなんとなく雰囲気が掴めてるけど、前提知識なく触るのは大変そうだ
シミュレーションの挙動はこんな感じです
次回はもう少し発展していきます