SwiftUI自定义导航返回按钮 隐藏默认按钮实现返回功能

问题现象 #

尝试修改SwiftUI返回按钮的显示文案与颜色时，即使未主动添加默认返回按钮，界面仍会额外显示一个原生返回按钮，出现两个按钮同时存在的异常显示：

问题复现代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: SeaView()) {
                Text("SeaView")
            }
        }
    }
}

struct SeaView: View {
    var body: some View {
        List {
            Text("Fish")
            Text("Octopus")
            Text("Shark")
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button("Cancel") {
                    
                }.foregroundColor(Color.red)
            }
        }
    }
}

问题原因 #

SwiftUI的导航栈（NavigationView/NavigationStack）在push进入下级页面时，会自动在导航栏leading位置注入系统默认的返回按钮，单纯添加自定义leading位置的工具栏按钮，不会自动覆盖或替换系统默认返回按钮，因此会出现两个按钮同时显示的问题。

修复方案 #

• 对下级页面添加.navigationBarBackButtonHidden(true)修饰符，主动隐藏系统自动生成的默认返回按钮，即可消除多余按钮。
• 通过SwiftUI的环境值@Environment(\.dismiss)获取系统导航返回方法，在自定义Cancel按钮的点击回调中调用该方法，即可实现和原生返回按钮完全一致的导航返回效果，不会破坏系统导航栈的层级逻辑。

修复后完整代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: SeaView()) {
                Text("SeaView")
            }
        }
    }
}

struct SeaView: View {
    // 注入系统dismiss环境变量
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        List {
            Text("Fish")
            Text("Octopus")
            Text("Shark")
        }
        // 隐藏系统默认返回按钮
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button("Cancel") {
                    // 调用系统返回方法实现和原生一致的返回效果
                    dismiss()
                }
                .foregroundColor(Color.red)
            }
        }
    }
}

补充说明：如果适配iOS 16及以上系统，推荐将NavigationView替换为更稳定的NavigationStack实现导航逻辑，上述自定义返回按钮的实现逻辑完全兼容，且默认保留系统原生侧滑返回交互。

内容的提问来源于stack exchange，提问作者Steven-Carrot