【SwiftUI】NavigationViewの基本的な使い方(後編)

前編に引き続きNavigationViewの解説をしていきます。

前回はこちら↓

navigationTitleモディファイア

NavigationViewにタイトルをつけることができるモディファイア。

公式リファレンス↓

実際の動作

• navigationTitleをつけない場合
  

• navigationTitleをつけた場合
  

一つ目と二つ目のソースコードの差はnavigationTitleをつけたかどうかだけです。
実際のソースコードを見てみましょう。

ソースコード

ContentView.swift

import SwiftUI

struct ContentView: View {

    let regions = ["カントー地方", "ジョウト地方", "ホウエン地方", "シンオウ地方"]

    var body: some View {
        VStack{
            // ここから
            HStack{
                Spacer()
                Button(action: {}, label: {
                    Text("ヘルプ")
                })
            }
            .padding(.horizontal)
            // ここまではNavigationViewに含まれない

            NavigationView {
                List(0..<4) { n in
                    NavigationLink(regions[n], destination: Region(id: n, regionName: regions[n]))
                }
                .navigationTitle("そらをとぶ") //ここでタイトルをつけている
            }
        }
    }
}

　.navigationTitleというコードのみで、フォントの大きさや太さをタイトルっぽくしてくれます。

navigaitonTitleには次のような機能もあります。

「もどる」ボタンの名前になる

最初の画面からどれかリンクをタップしてみます。

すると、、、

このように、前の画面にもどるためのボタンの名前として、navigationTitleがそのまま使われます。

また、画面遷移のときにアニメーションも自動でつけてくれます。（動画参照）

navigationTitleはどこに書く？

よくある間違い（主に私が）として、次のように書くパターンがあります。

ContentView.swift

            NavigationView {
                List(0..<4) { n in
                    NavigationLink(regions[n], destination: Region(id: n, regionName: regions[n]))
                }
//                .navigationTitle("そらをとぶ") //本来はここに書く
            }
            .navigationTitle("そらをとぶ") //NavigationViewの外側に書いている

このように書くと、エラーにはなりませんがタイトルは表示されなくなります。

navigationTitleはそもそも、ひとつの画面のタイトルでしかないため、遷移先には引き継がれません。各画面でnavigationTitleをつけることになります。

よって、navigationTitleはNavigationViewの内側に書くものだと認識すると良いでしょう。

参考文献