[SwiftUI][iOS]Button(ボタン)で画面遷移する方法(2 / 2)

iOSアプリ

2021/5/28

「ボタンで画面遷移する方法を知りたい」

「Buttonをタップしたら画面遷移するようにしたい」

と言う人に向けてこの記事は書かれています。

どうも、ちょげ(@chogetarou)です。

前回の記事に引き続き、この記事ではButton(ボタン)で画面遷移する方法について解説します。

スポンサーリンク

画面遷移

携帯電話, Twitter, 手, 保持, モバイルアプリ, スマート フォン, タッチ スクリーン

前回の記事の内容をおさらいすると、画面遷移をする方法は、

  • 表示する画面を切り替える
  • 画面の上に画面を被せる(モーダル表示)

の2パターンです。

今回は、画面の上に画面を被せる(モーダル表示)する方法について解説します。

スポンサーリンク

モーダル表示

まず、モーダル表示とは、画面の上に画面を被せる方法です。

モーダル表示は、1つの画面の上に画面を被せて、被せた画面に切り替わったように見せるのです。

例えば、同じ紙が2枚あったとします。

紙を1枚置いて、もう1枚を被せると、最初に置いた紙は見えなくなります。

モーダル表示もこれと一緒で、最初に表示していたビューは、被せたビューによって見えなくなり、被せたビューしか見えなくなります。

スポンサーリンク

実装方法

モーダル表示には、ZStackを使います。

ZStackによって、ビューを重ねることが出来ます。

流れ

モーダル表示をする流れは、

  1. ZStack内に2つのビューを表示する(被せる方が後)
  2. 被せるビューを条件によって表示されるようにする
  3. ボタンで条件に使う変数の値を変える

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

では、サラダばー!

コメント

タイトルとURLをコピーしました