NavigationStackビューは画面遷移やナビゲーションを管理するための便利な機能です。
iOS16から使えるようになったビューで、それまではNavigationViewが使われていました。
目次
NavigationStackの使い方
NavigationStack {
View1
View2
・・・
} NavigationStack内で複数のViewを持つことができ、書かれたViewがナビゲーションの管理対象となります。
画面遷移のリンクを追加する
NavigationView内で、NavigationLinkを使用して画面遷移を設定します。
NavigationStack {
// 画面遷移リンクの定義
NavigationLink {
// 遷移先のビュー
SecondView()
} label: {
// リンクボタンのテキスト
Text("次の画面へ")
.font(.title)
}
}これにより「次の画面へ」というラベルが表示され、タップするとSecondViewに遷移します。
struct ContentView: View {
var body: some View {
NavigationStack {
// 画面遷移リンクの定義
NavigationLink {
// 遷移先のView
SecondView()
} label: {
// リンクのラベルとして表示されるテキスト
Text("次の画面へ")
.font(.title)
}
}
}
}
struct SecondView: View {
var body: some View {
Text("SecondView").font(.title)
}
}
タイトルを追加する
ナビゲーションのタイトルを追加するにはnavigationTitleモディファイアを使います。
.navigationTitle("タイトル")このモディファイは、NavigationStackにつけるのではなく、ナビゲーション配下のViewにつけます。
struct ContentView: View {
var body: some View {
NavigationStack {
// 画面遷移リンクの定義
NavigationLink {
// 遷移先のView
SecondView()
} label: {
// リンクのラベルとして表示されるテキスト
Text("次の画面へ")
.font(.title)
}
.navigationTitle("First View") // ナビゲーションタイトル
}
}
}
struct SecondView: View {
var body: some View {
Text("SecondView").font(.title)
}
}
タイトルの表示モードを指定する
.navigationBarTitleDisplayMode(表示モード)タイトルの表示モードを制御するためのモディファイアです。
タイトルがどのように表示されるかを指定できます。
| 表示モード | 意味 |
|---|---|
| .large | 大きなタイトルが表示されます。 |
| .inline | 小さなタイトルが表示されます。 |
| .automatic | 前のナビゲーション項目から表示モードを継承します。 |
プログラムで画面遷移を管理方法
NavigationStack は path を使って手動でナビゲーションを管理することもできます。
struct ContentView: View {
@State private var path: [String] = [] // 画面の履歴を管理
var body: some View {
NavigationStack(path: $path) {
VStack {
Button("Go to Detail") {
path.append("detail") // 画面を遷移
}
}
.navigationTitle("Main View")
.navigationDestination(for: String.self) { value in
if value == "detail" {
DetailView()
}
}
}
}
}
●ポイント
・.navigationDestination(for:) を使って、指定された値に応じた画面を表示。
・@State private var path: [String] を使い、現在のナビゲーション履歴を管理。
・path.append("detail") でプログラム的に DetailView へ遷移。
Comment