【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

.navigationBarBackButtonHidden(true)

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