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

"struct CardView"を作りこみ

struct CardView:View {
   var body: some View{
       ZStack{
           RoundedRectangle(cornerRadius: 25.0)
               .stroke(lineWidth: 3)
           Text("✈️").foregroundColor(.blue)
       }
   }
}

文字を絵文字にします。

Text("✈️")

神経衰弱なのでカードは表、裏が必要なので条件で表、裏がある条件で変化するように

var isFaceUp:Bool

を設定してif文で条件分岐させます。

ZStack{}の中に入れていきます。

isFaceUpがtrueのとき

バックグラウンドを白くして

  RoundedRectangle(cornerRadius: 20.0)
                   .fill()
                   .foregroundColor(.white)

絵文字が表示されるようにします。

 RoundedRectangle(cornerRadius: 20.0)
                   .stroke(lineWidth: 3)
               Text("✈️")
                   .font(.largeTitle)

isFaceUpがfalseのとき

 RoundedRectangle(cornerRadius: 20.0)
                   .fill()

全文です。まずは、" var isFaceUp:Bool=true"としています。

struct CardView:View {
   var isFaceUp:Bool=true
   
   var body: some View{
       ZStack{
           if isFaceUp{
               RoundedRectangle(cornerRadius: 20.0)
                   .fill()
                   .foregroundColor(.white)
               
               RoundedRectangle(cornerRadius: 20.0)
                   .stroke(lineWidth: 3)
               Text("✈️")
                   .font(.largeTitle)
           }else{
               RoundedRectangle(cornerRadius: 20.0)
                   .fill()
           }
       }
   }
}

これで実行すると、白バックの絵文字が現れ、

var isFaceUp:Bool=true　　　→ 　　　var isFaceUp:Bool=false

とすると赤バックになります。

この動作ですが、カードをタップしたら実行できるようにします。

.onTapGesture{}

を使い、

.onTapGesture {
           isFaceUp = !isFaceUp
       }

として処理としては

isFaceUp = !isFaceUp

これでtrueとfalseが反転します。

次に、RoundedRectangle(cornerRadius: 20.0)が繰り返し出てきるので定数shapeを作って代入してすっきりさせます。

let shape = RoundedRectangle(cornerRadius: 20.0)

と宣言して、置き換えていきます。

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
       }
   }

このCardView()を ContentView()に反映させます。

struct ContentView: View {
   
   var body: some View {
       HStack{ 
               CardView()
               CardView()
               CardView()
       }
       .padding(.horizontal)
       .foregroundColor(.red)
   }
}

これを実行すればタップで反転、表と裏が表示されるようになります。