ナビゲーションバーの戻るボタンを非表示にする方法は？

本記事ではナビゲーションバーに表示される戻るボタンを非表示にする方法をご紹介します。

SwiftUIの.navigationBarBackButtonHidden(_:)ビューモディファイアをビューに適用し、引数としてtrueを渡すことで、ナビゲーションバーの戻るボタンを非表示にできます。

これは、ナビゲーションフローを独自にカスタマイズして実装したい場合や、特定のビューで標準の戻るボタンを使用したくない場合に便利です。

ナビゲーションバーを非表示にするサンプルコード
代わりにボタンを表示するには？
まとめ

ナビゲーションバーを非表示にするサンプルコード

使用例として、SwiftUIのNavigationStack内に配置されたビューで、戻るボタンを非表示にする方法を示します。

次のサンプルコードでは、ChildNavigationBarに.navigationBarBackButtonHidden(true)を適用して、ナビゲーションバーの戻るボタンを非表示にしています。

import SwiftUI

struct NavigationBar: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("詳細を表示", destination: ChildNavigationBar())
                // 他のリストアイテム...
            }
        }
    }
}

struct ChildNavigationBar: View {
    var body: some View {
        Text("This is the Detail View")
            // デフォルトの戻るボタンを非表示
            .navigationBarBackButtonHidden(true)
    }
}

この例では、ChildNavigationBarが表示されるとき、ナビゲーションバー上の戻るボタンが非表示になります。ユーザーが特定のフローを完了するまで前の画面に戻れないようにする場合などに活用されます。

代わりにボタンを表示するには？

先ほどのサンプルコードに.toolbarでボタンを追加しています。

struct ChildNavigationBar: View {
    @Environment(\.dismiss) private var dismiss
    var body: some View {
        Text("This is the Detail View")
            // デフォルトの戻るボタンを非表示
            .navigationBarBackButtonHidden(true)
            // 代わりの戻るボタン
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Button(action: {
                        dismiss()
                    }) {
                        Label("Sign In", systemImage: "arrowshape.turn.up.backward.circle")
                    }
                }
            }
    }
}

このコードでは、ChildNavigationBarに.navigationBarBackButtonHidden(true)を適用して標準の戻るボタンを非表示にし、.toolbarモディファイア内でButtonを使用してカスタムの戻るボタンを画面下側に追加しています。
ボタンのアクションでは、dismissメソッドを呼び出してビューを閉じ、前の画面に戻ります。