【SwiftUI】NavigationLinkで画面遷移を実装する方法を解説

NavigationLinkの実装

テキストのNavigationLinkの実装

まずは、テキストをタップすることで画面遷移するNavigationLinkの実装方法について解説致します。テキストのNavigationLinkは、以下のように実装します。

NavigationLink("テキスト", destination: 遷移先のView)

第１引数に、リンクとして表示されるテキストを指定し、第２引数のdestination:には、遷移先のViewを指定します。

以下は、遷移元のFirstViewから、遷移先のSecondViewへ画面遷移するサンプルコードです。

注意して頂きたいのは、NavigationLinkはNavigationViewと一緒に実装する必要があるということです。

NavigationView内にNavigationLinkを実装することで、画面遷移が行われるようになります。

カスタムビューのNavigationLinkの実装

続いて、画像などを使用したカスタムビューのNavigationLinkの実装方法について解説致します。カスタムビューのNavigationLinkは、以下のように実装します。

NavigationLink(destination: 遷移先のView) {
    カスタムビュー
}

「カスタムビュー」の部分に実装したViewが、画面遷移のためのリンクとなります。以下は、画像とテキストを一緒にしたNavigationLinkのサンプルコードです。

VStackで、画像とテキストが縦並びになるように実装しております。ポイントは、Imageに対し、renderingMode(.original)を実装していることです。この処理を実装していないと、画像がリンクの青色に変更されてしまいます。

NavigationLinkの実用的な使い方

有効・無効の切り替え

ここからは、実際にアプリを開発する上で使ってみたくなる、実用的な実装について紹介致します。

まずは、NavigationLinkの有効・無効を切り替える方法についてです。NavigationLinkに限らず、Viewの有効・無効は、disabled(disabled: Bool)で切り替えることができます。

以下は、ToggleのON/OFFに連動し、NavigationLinkの有効・無効が切り替わるサンプルコードです。

NavigationLinkは、disabledにfalseが指定されると非活性表示となります。この時にタップをしても、画面遷移は行われません。

他のViewのイベントから画面遷移

最後に、他のViewのイベントから画面遷移を行う方法を紹介致します。

NavigationLinkは、isActiveというBoolのフラグを持っており、この値をtrueに変更すると、画面遷移が行われます。

以下は、Buttonをタップすると、NavigationLinkのisActiveがtrueに変更され、画面遷移するサンプルコードです。

NavigationLinkのViewには、EmptyView()を指定することで、画面上には何も表示されなくしております。

また、NavigationLinkのisActiveには、@Stateで宣言した変数flugを指定しておき、Buttonタップ時にflugの値をtrueに変更することで、画面遷移が行われるように実装しております。

以上、NavigationLinkの実装方法と、実用的な使い方についてでした。