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

"struct CardView:View"で機能をまとめる

続きをやっていきます。Lecture 1の最後で以下の表示となっています。

カードをたくさん表示することが必要なのでまずはは、今表示しているものを分割、水平方向(左右両方：横方向)に増やしていきます。

横方向に向け増やしたい場合は"HStack"を使います。これを使って、

  HStack{
           ZStack{
               RoundedRectangle(cornerRadius: 25.0)
                   .stroke(lineWidth: 3)
               Text("Hello").foregroundColor(.blue)
           }
           
           ZStack{
               RoundedRectangle(cornerRadius: 25.0)
                   .stroke(lineWidth: 3)
               Text("Hello").foregroundColor(.blue)
           }
           ZStack{
               RoundedRectangle(cornerRadius: 25.0)
                   .stroke(lineWidth: 3)
               Text("Hello").foregroundColor(.blue)
           }
           
       }

という感じでZStack{}で書いている部分を入れこむと、

四角が3つが横に並びます。これで複数の四角ができるのですが、コードをみてみると同じコードが並んでいます。すっきりさせるために新しい構造体を作ります。

作る構造体は表示をするために使うものなので"View"を継承したものにします。基本的に新規プロジェクトを作った時にできる

"ContentView: View"

と同じ構造です。CardViewという名前にします。

struct CardView:View {
   var body: some View{
       
   }
}

このコードの中に先に作ってある

 ZStack{
               RoundedRectangle(cornerRadius: 25.0)
                   .stroke(lineWidth: 3)
               Text("Hello").foregroundColor(.blue)
           }

を入れ込みます。これでZStack{}のコードを構造体で作りことができました。

作った構造体CardView()をContentView()に入れてみます。

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

随分すっきりしました。これで実行するとZStack{}をそのまま使っていた時と同じように表示されます。

同じ見た目は同じになりました。同じことをするのであればコードはすっきりさせた方が良いです。

CardView()で表示することができたので、このCardView()に機能を詰め込んでいきます。カードは表、裏がありひっくり返る。枚数もたくさんいるし、種類も欲しいですね。