SwiftUI：如何统一配置全局导航栏右上角个人资料按钮？

我正在搭建一个采用TabView导航与独立NavigationStack（用于保留每个栈的独立导航状态）的SwiftUI应用。我希望在每个视图的导航栏右上角都显示相同的个人资料按钮，但目前需要在每个视图中重复添加如下代码：

.navigationDestination(isPresented: $presentProfilePage) {
    ProfileView()
}
.toolbar {
    Button {
        presentProfilePage = true
    } label: {
        if let img = user.displayImg {
            Image(uiImage: img)
                .resizable()
                .frame(width: 48, height: 48)
        } else {
            Image.defaultProfileImage
        }
    }
}

请问是否有办法一次性设置导航栏项，使其在所有视图中可见？

方法1：自定义ViewModifier封装导航栏配置 #

创建可复用的ViewModifier，把导航栏按钮和跳转逻辑打包，后续只需一行代码调用：

struct ProfileToolbarModifier: ViewModifier {
    @Binding var presentProfilePage: Bool
    let user: User // 替换为你的自定义User类型
    
    func body(content: Content) -> some View {
        content
            .navigationDestination(isPresented: $presentProfilePage) {
                ProfileView()
            }
            .toolbar {
                Button {
                    presentProfilePage = true
                } label: {
                    if let img = user.displayImg {
                        Image(uiImage: img)
                            .resizable()
                            .frame(width: 48, height: 48)
                            .clipShape(Circle()) // 可选：给头像添加圆形裁剪
                    } else {
                        Image.defaultProfileImage
                    }
                }
            }
    }
}

// 给View扩展便捷调用方法
extension View {
    func profileToolbar(presentProfilePage: Binding<Bool>, user: User) -> some View {
        self.modifier(ProfileToolbarModifier(presentProfilePage: presentProfilePage, user: user))
    }
}

使用示例：

HomeView()
    .profileToolbar(presentProfilePage: $presentProfilePage, user: currentUser)

方法2：封装带全局导航栏的NavigationStack #

如果每个Tab对应的NavigationStack都需要该按钮，直接封装自定义NavigationStack组件，彻底避免重复配置：

struct ProfileEnabledNavigationStack<Content: View>: View {
    @Binding var presentProfilePage: Bool
    let user: User
    @ViewBuilder let content: Content
    
    var body: some View {
        NavigationStack {
            content
                .navigationDestination(isPresented: $presentProfilePage) {
                    ProfileView()
                }
                .toolbar {
                    Button {
                        presentProfilePage = true
                    } label: {
                        if let img = user.displayImg {
                            Image(uiImage: img)
                                .resizable()
                                .frame(width: 48, height: 48)
                                .clipShape(Circle())
                        } else {
                            Image.defaultProfileImage
                        }
                    }
                }
        }
    }
}

使用示例（替换TabView内的原生NavigationStack）：

TabView {
    ProfileEnabledNavigationStack(presentProfilePage: $presentProfilePage1, user: currentUser) {
        HomeView()
    }
    .tabItem { Label("首页", systemImage: "house") }
    
    ProfileEnabledNavigationStack(presentProfilePage: $presentProfilePage2, user: currentUser) {
        ExploreView()
    }
    .tabItem { Label("发现", systemImage: "magnifyingglass") }
}

注：由于每个Tab的NavigationStack状态独立，需为每个Tab单独绑定presentProfilePage变量，或用全局状态管理器统一管理。

方法3：ObservableObject全局状态管理（进阶） #

创建全局状态管理器，通过环境对象传递状态，实现全应用统一控制：

class AppNavigationState: ObservableObject {
    @Published var showProfile = false
    let currentUser: User
    
    init(user: User) {
        self.currentUser = user
    }
}

// 在App入口注入环境对象
@main
struct YourApp: App {
    @StateObject private var navState = AppNavigationState(user: currentUser)
    
    var body: some Scene {
        WindowGroup {
            TabView {
                NavigationStack {
                    HomeView()
                }
                .tabItem { Label("首页", systemImage: "house") }
                
                NavigationStack {
                    ExploreView()
                }
                .tabItem { Label("发现", systemImage: "magnifyingglass") }
            }
            .environmentObject(navState)
        }
    }
}

// 改造ViewModifier，使用环境对象
struct ProfileToolbarModifier: ViewModifier {
    @EnvironmentObject var navState: AppNavigationState
    
    func body(content: Content) -> some View {
        content
            .navigationDestination(isPresented: $navState.showProfile) {
                ProfileView()
            }
            .toolbar {
                Button {
                    navState.showProfile = true
                } label: {
                    if let img = navState.currentUser.displayImg {
                        Image(uiImage: img)
                            .resizable()
                            .frame(width: 48, height: 48)
                            .clipShape(Circle())
                    } else {
                        Image.defaultProfileImage
                    }
                }
            }
    }
}

extension View {
    func profileToolbar() -> some View {
        self.modifier(ProfileToolbarModifier())
    }
}

使用示例：

YourView()
    .profileToolbar()

所有注入环境对象的视图，只需调用该方法即可自动添加导航栏个人资料按钮，状态由AppNavigationState统一管理。

内容的提问来源于stack exchange，提问作者esbenr