2021/5/28
「ボタンで画面遷移する方法を知りたい」
「Buttonをタップしたら画面遷移するようにしたい」
と言う人に向けてこの記事は書かれています。
どうも、ちょげ（@chogetarou）です。
前回の記事に引き続き、この記事ではButton（ボタン）で画面遷移する方法について解説します。
画面遷移
前回の記事の内容をおさらいすると、画面遷移をする方法は、
- 表示する画面を切り替える
- 画面の上に画面を被せる（モーダル表示）
の２パターンです。
今回は、画面の上に画面を被せる（モーダル表示）する方法について解説します。
モーダル表示
まず、モーダル表示とは、画面の上に画面を被せる方法です。
モーダル表示は、1つの画面の上に画面を被せて、被せた画面に切り替わったように見せるのです。
例えば、同じ紙が2枚あったとします。
紙を１枚置いて、もう１枚を被せると、最初に置いた紙は見えなくなります。
モーダル表示もこれと一緒で、最初に表示していたビューは、被せたビューによって見えなくなり、被せたビューしか見えなくなります。
実装方法
モーダル表示には、ZStackを使います。
ZStackによって、ビューを重ねることが出来ます。
流れ
モーダル表示をする流れは、
- ZStack内に2つのビューを表示する（被せる方が後）
- 被せるビューを条件によって表示されるようにする
- ボタンで条件に使う変数の値を変える
ZStack内に2つのビューを表示する
最初に、ZStackに遷移させたいビューを2つ表示します。
ZStack {
FirstView()
//被せるビュー
SecondView()
}被せるビューを条件によって表示されるようにする
次に条件によって、被せるビューが表示されるようにします。
@State var viewOn = false
ZStack {
FirstView()
if viewOn {
SecondView()
}
}ボタンで条件に使う変数の値を変える
ボタンをタップすることによって、条件分岐に使用する変数が変わるようにします。
@State var viewOn = false
VStack {
ZStack {
FirstView()
if viewOn {
SecondView()
}
}
Button(action: {
viewOn = true
}) {
Text("モーダル表示")
}
}ボタンがタップされることによって、SecondViewが表示されるようになり、FirstViewに被さり、モーダル表示できます。
実際に使用するときは、viewOnをSecondViewからでも変更できるようにBindingをします。
まとめ
- モーダル表示によって、画面遷移出来る
- ZStack内で条件によって画面が表示されるようにすればモーダル表示できる
- ボタンは、条件に使う変数を変えるために使用する
前回の記事
終わりに
読んで頂きありがとうございました。
少しでも参考になれば嬉しいです。
分かりにくかった点、知りたいことなどありましたら、Twitterや当ブログから教えてください。
Twtter >>> https://twitter.com/chogetarou
では、サラダばー！
コメント