【SwiftUI】NavigationViewでの画面遷移

NavigationView配下での画面遷移について解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

基本的な画面遷移

まずは、NavigationView配下での基本的な画面遷移の例を紹介します。

基本的な画面遷移

NavigationView配下での画面遷移にはNavigationLinkを使用します。

引数destinationで遷移先のビューの指定、続くクロージャーで画面遷移のトリガーとなるView(ラベル)を定義します。

ラベルに画像を使う場合の注意点

通常ラベルとして指定されたViewは、タップ可能である事がわかるようSwiftUIによって青色で表示されます。
次のように画像(Image)を使った場合も青一色で表示されてしまいます。

ラベルに画像を使う1

画像をオリジナルの色調で表示するには、Imageビューの.renderingMode(.original)モディファイアを使用します。

ラベルに画像を使う2

代わりにNavigationLinkの.buttonStyle(PlainButtonStyle())モディファイアを使用するとラベル全体をオリジナルの色調にできます。

ラベルに画像を使う3

スポンサーリンク

ListやFormでの画面遷移

NavigationViewをListやForm内で使用した場合は、表示形式が通常と変わります。
ラベルが青表示にはならず、代わりに右端にグレーの開示インジケーターが表示されます。
これは行をタップすると右から別の画面がスライドして表示される事をユーザーに知らせる、iOSの標準的なUIです。

ListやFormでの画面遷移

スポンサーリンク

条件指定による画面遷移

ラベルのタップでは無く、別の条件で画面遷移させるには次のイニシャライザを使います。

引数(isActive)に画面遷移の条件となるフラグ(Bool型のバインド変数)を指定します。
このフラグがtrueになった時に画面遷移します。
ラベルに EmptyView() を指定して「ラベルViewを表示しない」事を明示します。

次は、正しい合言葉を入力すると画面遷移するサンプルです。

条件指定での画面遷移

スポンサーリンク

遷移元画面に戻る方法

NavigationLinkで遷移した画面から遷移元画面に戻るには方法がいくつかあります。

戻るボタンをタップする

画面左上に自動で表じされる戻るボタンをタップします。

戻るボタンをタップする

画面を右にスワイプする

画面を右にスワイプする

コードで実装する

環境変数の「presentationMode」プロパティで「dismiss」メソッドを呼び出します。

必要なのは次の2行です。
①presentationMode環境変数を取得
②dismiss()メソッド呼び出し

条件指定により画面遷移した場合は、isActiveで指定した条件フラグをfalseする方法も有効です。

また、ナビゲーションバーの戻るボタンが不要な場合は、次のModifierで非表示にできます。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】NavigationViewの使い方
階層的な画面遷移を管理するNavigationViewの使い方を解説します。
【SwiftUI】ナビゲーションバーのボタン配置
ナビゲーションバーにボタンを配置する方法を解説します。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信