[SwiftUI] NavigationView の使い方 (特にタイトルバー周り)

⌛️ < 1 min.

SwiftUI でよく使われる NavigationView の覚書です。

特に、タイトルバー周りについて詳細に書きます。

親子画面の移動

一般的な使い方。情報が階層化されているときに、その階層に従って、ビューを辿ることができます。

以下のようなコードで実現できます。

概要画面


struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: ChildView(), label: {
                Text("to Child")
            })
            .navigationBarTitle("NavBar")
        }
    }
}

詳細画面


struct ChildView: View {
    var body: some View {
        Text("Child")
    }
}

タイトルバーの表示/非表示

NavigationView には、タイトルを設定することができます。.navigationBarTitle modifierを使います。例：.navigationBarTitle(“NavBar”)

この modifier は、NavigationView に対して設定するのではなく、NavigationView の内部の View に設定する必要があります。

注意

NavigationView に対して、.navigationBarTitle の modifier を設定することができてしまいますが、効果がありません。エラーにもなりませんので、気付きにくいです。

このタイトルバーを非表示にするための modifier が用意されていまして、それが、.navigationBarTitleHidden です。

まとめると、タイトルバーは、以下のときに表示されます。
・.navigationBarTitle でタイトルが設定されている
・.navigationBarTitleHidden でタイトルが非表示になるように設定されていない

タイトルが設定されていなければ表示されませんし、タイトルが設定されていても、非表示設定されていれば表示されません。

.navigationBarTitleHidden の影響範囲

.navigationBarTitleHidden は、現在のビューだけではなく、NavigationLink 等を使って辿ったビューの表示にも影響を与えたり与えなかったりします。（バグかも）

例えば、親Viewの NavigationView で、タイトルが設定されていて、.navigationBarTitleHidden が設定されていると、子ビューでは、Backボタンが表示されません。
タイトルが設定されずに、.hidden 設定されると、子ビューでは、Backボタンが表示されます。

この振る舞いには、統一感を感じないので、将来的に変更されそうな気もしますが、Xcode11.5 の現在では上記のような振る舞いをします。