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()に機能を詰め込んでいきます。カードは表、裏がありひっくり返る。枚数もたくさんいるし、種類も欲しいですね。
この記事が気に入ったらサポートをしてみませんか?