SwiftUIでいこう！- スタンフォード大学Lecture 2 - 3

"CardView()"をうまく使う

いろんな絵文字に対応するため変数を作ります。

var content:String

変数"content"に入れた絵文字データが反映されるようにします。

Text(content)

変数の部分を変更したもの全文は以下となります。

struct CardView:View {
   var content:String
   @State var isFaceUp:Bool=true
  
   var body: some View{
       ZStack{
           let shape =  RoundedRectangle(cornerRadius: 20.0)
           if isFaceUp{
               shape
                   .fill()
                   .foregroundColor(.white)
               
               shape
                   .stroke(lineWidth: 3)
               Text(content)
                   .font(.largeTitle)
           }else{
               shape
                   .fill()
           }
       
       }.onTapGesture {
           isFaceUp = !isFaceUp
       }
   }
}

これをContentView()で読み込めるようにします。

struct ContentView: View {

   var body: some View {
       HStack{
           CardView(content:"✈️"])
           CardView(content:"🐶")
           CardView(content:"🐱")
           
       }
       .padding(.horizontal)
       .foregroundColor(.red)
   }
}

emojis(絵文字)を配列で管理すると便利で、いろんな絵文字を入れておくことができます。

var emojis = ["✈️","🐶","🐱","🐻"]

struct ContentView: View {
   var emojis = ["✈️","🐶","🐱","🐻"]
   var body: some View {
       HStack{
           CardView(content:emojis[0])
           CardView(content:emojis[1])
           CardView(content:emojis[2])
           CardView(content:emojis[3])
           
       }
       .padding(.horizontal)
       .foregroundColor(.red)
   }
}

配列で定義してある絵文字の分だけ、繰り返しなので "ForEach"を使って配列の繰り返し、CardViewの(content:emoji)に入れていきます。

struct ContentView: View {
   var emojis = ["✈️","🐶","🐱","🐻"]
   var body: some View {
       HStack{
           ForEach(emojis, id: \.self,content:{emoji in
               CardView(content:emoji)
           })
       }
       .padding(.horizontal)
       .foregroundColor(.red)
   }
}

カッコ、波カッコの部分を整理します。

 HStack{
           ForEach(emojis, id: \.self){emoji in
               CardView(content:emoji)
           }
       }

全体は

struct ContentView: View {
   var emojis = ["✈️","🐶","🐱","🐻"]
   var body: some View {
       HStack{
           ForEach(emojis, id: \.self){emoji in
               CardView(content:emoji)
           }
       }
       .padding(.horizontal)
       .foregroundColor(.red)
   }
}

これで配列分のCardView()が連続して作ることができます。構造体CardView()を別に作ってContentViewで使うことでわかりやすく機能を追加しやすくなりました。