初心者でもわかるswiftUI Vol.１３

どうも、大統領選はトランプが勝つと予想しているかわさきです。

今日は少しサボっていたswiftUIのことについて書いていこうと思います。
前回はアラートについてやったので今回はピッカーについてまとめていこうと思います。

26.ピッカー

PickerViewを用意してください。

@State private var selectedColor = 0
   let colorViews = [Color.red, Color.green, Color.blue]
   let colorNames = ["Red", "Green", "Blue"]
   var body: some View {
       VStack {
           Picker(selection: $selectedColor, label: Text("Color")) {
               Text("Red").tag(0)
               Text("Green").tag(1)
               Text("Blue").tag(2)
           }
           
       HStack {
               colorViews[selectedColor]
                   .frame(width: 50, height: 50)
               Text("value: \(selectedColor)").frame(width: 60)
               Text("\(colorNames[selectedColor])").frame(width: 70)
           }
       }
       .padding()
   }

このコードを入力するとピッカーで選んだ色が表示できるようになります。
コード解説をしていきます

@State private var selectedColor = 0
   let colorViews = [Color.red, Color.green, Color.blue]
   let colorNames = ["Red", "Green", "Blue"]

@State ~で変数selectedColorを宣言して、let colorViewsで色指定をし、let colorNamesで色の名前を入れていきます。

 VStack {
           Picker(selection: $selectedColor, label: Text("Color")) {
               Text("Red").tag(0)
               Text("Green").tag(1)
               Text("Blue").tag(2)
           }

ここではピッカーの中を整えています。
VStackでピッカーとテキストを縦に並べて表示しています。これまでの応用なので大丈夫だと思います！

 HStack {
               colorViews[selectedColor]
                   .frame(width: 50, height: 50)
               Text("value: \(selectedColor)").frame(width: 60)
               Text("\(colorNames[selectedColor])").frame(width: 70)
           }

ここで選んだ色を表示するときのViewを整えています。colorViews[selectedColor]で選んだ色を表示し、その後のText二つで表示するTextを選んで形を整えています。

このように選んだ色ごとに表示と色が変わりました！クリアです！

まとめ

次回はもう少し難しいピッカーの応用みたいのをやっていこうと思います！

今までは参考書などを使ってきましたが、これからは自分で考えた物も入れていこうと思います。

今までの内容は「プロフィール→マガジン→swiftUI情報発信」というところにまとめているので見返してみて下さい。

読んでいただきありがとうございます😊

読んでくださった方はぜひハートをお願いします✋