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

どうも、東京の生活を考えるとワクワクしている田舎者のかわさきです。

前回はピッカーで色が変わるやつをやりましたが、今回は文字のみを変化させる応用版をやっていきたいと思います。

27.ピッカー応用

PickersecondViewを用意してください。

struct PickersecondView: View {
   
   @State var selectedSize = 2
   @State var selectedColor = 0
   let sizes = ["XS","S","M","L","LL"]
   let colors = ["Red","Green","Blue","Pink","White","Yellow"]
   
   var body: some View {
       VStack {
           HStack {
               Picker(selection: $selectedSize, label: Text("")) {
                   ForEach(0..<sizes.count) {
                       index in Text(self.sizes[index]).tag(index)
                   }
               }
               Picker(selection: $selectedColor, label: Text("")) {
                   ForEach(0..<colors.count) {
                       index in Text(self.colors[index]).tag(index)
                   }.offset(x:-70)
               }
               .frame(width: 200)
               .onAppear(perform: {
                   self.selectedColor = self.colors.count/2
               })
           }
           
           HStack {
               Text("size: \(sizes[selectedSize])")
                   .padding(.horizontal,40)
               Text("color: \(colors[selectedColor])")
                   .padding(.horizontal,30)
           }
           .foregroundColor(Color.white)
           .font(.headline)
           .background(RoundedRectangle(cornerRadius: 20)
                           .frame(width: 300,height: 40)
                           .foregroundColor(Color.gray))
       }
   }
}

このコードを入力することで選んだサイズと色が文字で表示されるようになります。
コード説明をしていきます

@State var selectedSize = 2
   @State var selectedColor = 0
   let sizes = ["XS","S","M","L","LL"]
   let colors = ["Red","Green","Blue","Pink","White","Yellow"]

@State var selectedSize = 2　ここではインデックス番号つまり、選んだサイズが２番目から表示されることを表しています。上から０になっています。
let　からは中身になる部分を入れているだけなので分かりやすいと思います。

 HStack {
              Picker(selection: $selectedSize, label: Text("")) {
                   ForEach(0..<sizes.count) {
                       index in Text(self.sizes[index]).tag(index)
                   }
               }
               Picker(selection: $selectedColor, label: Text("")) {
                   ForEach(0..<colors.count) {
                       index in Text(self.colors[index]).tag(index)
                   }.offset(x:-70)
               }
               .frame(width: 200)
               .onAppear(perform: {
                   self.selectedColor = self.colors.count/2
               })
           }

前回は色ごとにタグを振って表示できるようにしていましたが、今回はForEachを使って回すことで省略化しています。
しかし.tag(index)があるので結果的には割り振っているのと同じことになります。

後のコードは前回の復習なので省略させていただきます

どのようになるかというと、こんな感じです！

表示している角丸四角形はRoundedRectangle(cornerRadius: 20)ここの部分で調整しています。

まとめ

前回の色が出せるやつと組み合わせたのも考えているので時間があるときに出したいと思います。

次回はトグルの説明をまとめていきたいと思います！日常生活で使っているアプリも見方を変えたり実際にやってみることで制作側の大変さがわかるので非常に良いと思います笑

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

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

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