【SwiftUI】NavigationBarの戻るボタンの色や文字を変更する方法

この記事では、ナビゲーションバーの戻るボタンのカスタマイズについて解説していきたいと思います。

やりたいこと

ナビゲーションバーで遷移すると、戻るボタンが自動生成されます。この戻るボタンの文字は、前の画面のナビゲーションタイトルか、Backかのどちらかです。

日本語アプリなら「Back」ではなく、「戻る」の方が良いと思うので、文字を変えていきたいと思います。

こんな感じで「戻る」にして色を変えましょう。

実装方法

SwiftUIでは、戻るボタンのタイトルをカスタマイズできません。色だけなら.accentColor(.red)で変えられるのですが、タイトル文言は変更できませんでした。

そのため、toolbarで左上にボタンを上書きするという実装方法になります。

以下のように記述してください。

struct NextView: View {
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        Text("画面2")
            .navigationBarBackButtonHidden(true)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        dismiss()
                    }) {
                        HStack {
                            Image(systemName: "chevron.backward")
                                .font(.system(size: 17, weight: .medium))
                            Text("戻る")
                        }
						.foregroundColor(.green)
                    }
                }
            }
    }
}
コード解説

まず、上書きするので、戻る処理を行わないといけません。

戻る処理は、以下の変数を追加し、

@Environment(\.dismiss) var dismiss

戻りたいタイミングで、dismiss()を呼ぶだけです。

次に、以下のコードで元からあるBackボタンを削除します。

.navigationBarBackButtonHidden(true)

そして、toolbarで左上に戻るボタンと同じアイコンを添えてText()でタイトルを変更します。

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {
            dismiss()
        }) {
            HStack {
                Image(systemName: "chevron.backward")
                    .font(.system(size: 17, weight: .medium))
                Text("戻る")
            }
			.foregroundColor(.green)
        }
    }
}