[SwiftUI][iOS]Button（ボタン）で画面遷移する方法（1 / 2）

2021/5/28

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

「ボタンを押したら画面遷移するようにしたい」

そういった人に向けて、この記事は書かれています。

どうも、ちょげ（@chogetarou）です。

この記事では、Button（ボタン）で画面遷移する方法を解説します。

画面遷移
画面自体を切り替える
まとめ
次の記事
1. 関連

画面遷移

Iphone, 手, 画面, スマートフォン, アプリ, 携帯電話, 電話, 通信, モバイル, 技術

その前に画面遷移について少し触れておきます。

画面遷移には、2パターンあります。

画面自体を切り替える
画面の上に画面を被せる（モーダル表示）

この２パターンをボタンで実現する方法をそれぞれ解説します。

画面自体を切り替える

表示されている画面自体を切り替える場合は、列挙体を使います。

表示する画面をそれぞれ列挙体の値とすることで画面遷移させます。

手順は以下の流れです。

列挙体を作る
列挙体の値を変数に格納する
値によって画面を表示するようにする
変数内の値をButtonで変える
画面が遷移する

列挙体を作る

まず、列挙体を作ります。

例えば、4つの画面がある場合は

enum display {
   //画面１
    case first
　　　//画面２
    case second
    //画面３
    case third
　　　//画面４
    case fourth
}

列挙体の値を変数に格納する

表示させたい画面と対応する列挙体の値を変数に格納します。

後々、値を変えることによって画面を表示し直すので、@StateやObservedObjectを使います。

//画面１を格納
var displayMode = display.first

変数に@Stateを使う場合は、@Bindingを使って、表示している画面から値を操作できるようにします。
@Bindingについてはこちらの記事で解説しています。

値によって画面を表示するようにする

条件分岐を使うことで、変数の値によって画面を表示するようにします。

if displayMode  == display.first {
   firstView()
} else if displayMode == display.second {
   secondView()
} else if displayMode == display.third {
   thirdView()
} else if displayMode == display.fourth {
   fourthView()
}

変数の値をButtonで変える

Buttonのaction内で変数の値を変えます。

例えば、firstViewからsecondViewに遷移したいなら

Button(action: {
    displayMode = .second
}) {
    Text("Secondビューへ")
}

画面が遷移する

実際にButtonをタップすると、変数の値が変わります。

そして、条件分岐の真偽が変わるので、表示される画面も変わります。

これがButtonで画面遷移する方法の1つです。

まとめ

画面遷移する方法は２パターン
画面自体の切り替え
画面の上に画面を表示する（モーダル表示）
画面自体の切り替えは、列挙体と条件分岐を使うことで実現できる
条件分岐に使用する変数の値をButtonで変えることによって画面遷移出来る

次の記事では、画面の上に画面を表示するモーダル表示について解説します。