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)
}
}
![](https://seeds-digital.com/wp-content/uploads/2023/12/4ca5a1104e1b3b8d36f0cc448ac127e9-509x1024.png)
![](https://seeds-digital.com/wp-content/uploads/2023/12/d50c0da68a5a95d4fe85d5688ccd557b-506x1024.png)
タイトルを追加する
ナビゲーションのタイトルを追加するには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)
}
}
![](https://seeds-digital.com/wp-content/uploads/2023/12/517cbb337736c74781f4bbd5a5821f79-510x1024.png)
タイトルの表示モードを指定する
.navigationBarTitleDisplayMode(表示モード)
タイトルの表示モードを制御するためのモディファイアです。
タイトルがどのように表示されるかを指定できます。
表示モード | 意味 |
---|---|
.large | 大きなタイトルが表示されます。 |
.inline | 小さなタイトルが表示されます。 |
.automatic | 前のナビゲーション項目から表示モードを継承します。 |
![](https://seeds-digital.com/wp-content/uploads/2023/12/517cbb337736c74781f4bbd5a5821f79-510x1024.png)
![](https://seeds-digital.com/wp-content/uploads/2023/12/77368cbfd86274dc65851ca302aa2191-509x1024.png)
Comment