SwiftUIのnavigationDestination(for:destination:)モディファイアは、NavigationStackやNavigationSplitViewと組み合わせて使用されます。
これにより、ナビゲーション時にどのビューを表示するかを動的に決定することができます。
この機能は、リストから選択されたアイテムに基づいて異なる詳細ビューを表示するなど、条件に応じたナビゲーションに役立ちます。
NavigationDestinationの記述の種類
NavigationDestinationにはいくつか記述方法に種類があります。大まかに違いを説明すると、以下のように使い方の違いがあります。
- navigationDestination(for:destination:)
データ型と値を判別して宛先を決定します - navigationDestination(isPresented: destination:)
フラグのtrue/falseを判別して宛先の表示状態を切り替える - navigationDestination(item: destination:)
バインディングしたプロパティの状態を監視して宛先を決定する
.navigationDestination(for:destination:)の使い方
navigationDestination(for:destination:)はデータ型とその内容によって宛先を判別します。
以下は、navigationDestination(for:destination:)を使用する基本的な例です。この例では、ユーザーがリストのアイテムを選択したときに、そのアイテムのIDに基づいて異なる詳細ビューを表示します。
サンプルプログラム
import SwiftUI
struct NavigationDest: View {
var body: some View {
NavigationStack {
List {
NavigationLink(value: "Item1") {
Text("Item 1")
}
NavigationLink(value: "Item2") {
Text("Item 2")
}
}
.navigationDestination(for: String.self) { itemId in
if itemId == "Item1" {
ChildNavigationDest(text: "Detail of Item 1")
} else if itemId == "Item2" {
ChildNavigationDest(text: "Detail of Item 2")
}
}
}
}
}
struct ChildNavigationDest: View {
let text: String
var body: some View {
Text(text)
}
}このコードは、NavigationLink(value:)を使用してリストの各アイテムに一意のID（この場合は文字列）を割り当て、navigationDestination(for:destination:)を使用してそのIDに応じた詳細ビューを表示する方法を示しています。
複数の型に対応する
navigationDestinationは、異なる型のデータに対しても使用できます。例えば、文字列と整数型のアイテムをナビゲーションのトリガーとして使用する場合、それぞれの型に対してnavigationDestinationを定義できます。
型はString型やInt型意外にColor型なども使用可能です。また、独自に定義した型を用いることも可能です。
.navigationDestination(for: String.self) { itemId in
// 文字列型のアイテムに対する詳細ビューを表示
}
.navigationDestination(for: Int.self) { itemId in
// 整数型のアイテムに対する詳細ビューを表示
}navigationDestination(isPresented:destination:) の使い方
navigationDestination(isPresented:destination:)は、フラグのtrue/falseを判別して宛先の表示状態を切り替えることが出来ます。
このモディファイアは、NavigationStackと一緒に使用され、isPresentedバインディングを通じて、表示するビューを動的に制御することができます。これにより、プログラム的にナビゲーションのフローを管理しやすくなります。
このモディファイアは、ユーザーのアクションやアプリケーションの状態に基づいて、ナビゲーション先を動的に表示する場合に特に便利です。
isPresentedにtrueが設定されると、指定されたdestinationビューにナビゲートします。isPresentedがfalseになると、ナビゲーションは解除され、ユーザーはナビゲーションスタックの前のビューに戻ります。
サンプルプログラム
import SwiftUI
struct NavigationDest: View {
@State private var isDetailPresented = false
var body: some View {
NavigationStack {
Button("Show Detail") {
isDetailPresented = true
}
.navigationDestination(isPresented: $isDetailPresented) {
ChildNavigationDest()
}
}
}
}
struct ChildNavigationDest: View {
var body: some View {
Text("This is the Detail View")
}
}この例では、NavigationDest内にButtonがあり、このボタンをタップするとisDetailPresentedがtrueに設定されます。
navigationDestination(isPresented:destination:)モディファイアがisDetailPresentedバインディングに応じてChildNavigationDestを表示するかどうかを決定します。ユーザーがこのボタンをタップすると、DetailViewが表示されます。
navigationDestination(item:destination:) の使い方
navigationDestination(item:destination:)はバインディングしたプロパティの状態を監視して宛先を決定することが出来ます。
for:destination: バージョンとは異なり、item:destination: は選択されたアイテムの変更を監視し、そのアイテムに対応するビューへのナビゲーションをトリガーします。
サンプルプログラム
以下の例では、ユーザーがリスト内のアイテムを選択したときに詳細ビューにナビゲートする方法を示します。
import SwiftUI
struct NavigationDest: View {
var items = ["Item 1", "Item 2", "Item 3"]
@State private var selectedItem: String? = nil
var body: some View {
NavigationStack {
List(items, id: \.self) { item in
Button(item) {
selectedItem = item
}
}
.navigationDestination(item: $selectedItem) { item in
ChildNavigationDest(item: item)
}
}
}
}
struct ChildNavigationDest: View {
let item: String
var body: some View {
Text("Details for \(item)")
}
}
この例では、List が各アイテムに対してボタンを表示します。
ユーザーがボタンのいずれかをタップすると、selectedItem がそのアイテムの値に設定され、navigationDestination(item:destination:) によって、そのアイテムに対応する DetailView が表示されます。
$selectedItem は、selectedItem 変数のバインディングを表し、この変数の値が変更されると、対応するアイテムの DetailView にナビゲートします。
navigationDestinationを使用する際のポイント
navigationDestinationはNavigationStackやNavigationSplitView内でのみ使用可能です
まとめ
navigationDestinationを使用することでSwiftUI アプリケーションにおいて、アイテム選択に基づく直感的なナビゲーションフローを簡単に実装できます。
条件に基づいてナビゲーション先のビューを表示したり、ユーザーのアクションに応じてビューをプログラム的に切り替えたりする場合に特に便利ですので、活用してみてください。
