公開日:2020/08/20更新日:2020/09/03
【SwiftUI】NavigationLinkで画面遷移を実装する方法を解説

- SwiftUIで画面遷移を実装する方法が知りたい
- NavigationLinkの有効・無効を切り替えたい
- 他のViewのイベントで画面遷移したい
SwiftUIでは、NavigationViewとNavigationLinkを実装することで、UINavigationControllerのような画面遷移を実装することができます。
本記事では、NavigationLinkの基本的な実装方法と、有効・無効の切り替え、そして、他のViewのイベントから、NavigationLinkのisActiveフラグを切り替えることで画面遷移する方法について解説致します。
目次
NavigationLinkの実装
テキストのNavigationLinkの実装
まずは、テキストをタップすることで画面遷移するNavigationLinkの実装方法について解説致します。テキストのNavigationLinkは、以下のように実装します。
NavigationLink("テキスト", destination: 遷移先のView)
第1引数に、リンクとして表示されるテキストを指定し、第2引数の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の実装方法と、実用的な使い方についてでした。
関連記事