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)
}
}
これを実行すればタップで反転、表と裏が表示されるようになります。
この記事が気に入ったらサポートをしてみませんか?