SwiftUI中为多视图设置不同自定义UINavigationBar样式的问题

我在SwiftUI里给不同视图定义多种自定义UINavigationBar样式时遇到了问题。我在UINavigationBar的扩展里写了两种外观：默认样式和透明背景样式。在入口ContentView()里调用了UINavigationBar.defaultNavigationBar()，但通过NavigationLink跳转到其他视图后，想根据setNavigationBarStyle里的逻辑切换导航栏外观时，切换完全没效果，导航栏一直保持初始的默认样式配置。

请问这种实现方法是否正确？是不是漏了什么配置？如果不对，基于当前视图给UINavigationBar设置不同样式的正确方法是什么？

自定义UINavigationBar扩展代码 #

import SwiftUI

extension UINavigationBar {
    static let appearance = UINavigationBarAppearance()

    static func defaultNavigationBar() {
        appearance.backgroundColor = UIColor(Color.audi.barBackground)
        appearance.titleTextAttributes = [
            NSAttributedString.Key.foregroundColor: UIColor(Color.audi.barContent),
            NSAttributedString.Key.font: UIFont(name: Fonts.typeVFNormalBold.rawValue, size: 12)!
        ]
        appearance.shadowColor = UIColor(Color.audi.barTopSeparator)
        appearance.setBackIndicatorImage(UIImage(named: "back-small")!, transitionMaskImage: UIImage(named: "back-small")!)

        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().compactAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }

    static func transparentNavigationBar() {
        appearance.configureWithTransparentBackground()

        appearance.titleTextAttributes = [
            NSAttributedString.Key.foregroundColor: UIColor(Color.audi.barContentOverlay),
            NSAttributedString.Key.font: UIFont(name: Fonts.typeVFNormalBold.rawValue, size: 12)!
        ]

        appearance.shadowColor = .clear
        appearance.setBackIndicatorImage(UIImage(named: "back-white-small")!, transitionMaskImage: UIImage(named: "back-white-small")!)

        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().compactAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
}

样式切换逻辑代码 #

func setNavigationBarStyle(scrollY: CGFloat) {
    if scrollY <= 0 {
        UINavigationBar.transparentNavigationBar()

    } else {
        UINavigationBar.defaultNavigationBar()
    }
}

问题原因分析 #

当前实现有两个核心问题：

1. 共享单一UINavigationBarAppearance实例：扩展里定义的静态appearance属性被两种样式方法共用，修改后赋值给全局UINavigationBar.appearance()会导致样式覆盖混乱，且全局设置无法实现视图级别的独立样式控制。
2. 全局样式无法适配SwiftUI视图生命周期：UINavigationBar.appearance()设置的是全局默认样式，SwiftUI的NavigationStack/NavigationView在视图切换时不会自动触发全局样式更新，所以切换逻辑无法生效。

正确实现方法 #

方法1：使用SwiftUI原生Toolbar修饰器（推荐） #

直接在视图内部通过SwiftUI原生API配置导航栏，适配视图生命周期，无需依赖UIKit扩展：

// 透明导航栏视图
struct TransparentNavView: View {
    var body: some View {
        Text("透明导航栏页面")
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("透明标题")
                        .font(.custom(Fonts.typeVFNormalBold.rawValue, size: 12))
                        .foregroundColor(Color.audi.barContentOverlay)
                }
            }
            .toolbarBackground(.transparent, for: .navigationBar)
            .toolbarColorScheme(.dark, for: .navigationBar)
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: backButton)
    }
    
    private var backButton: some View {
        Button(action: {
            // 返回逻辑
        }) {
            Image("back-white-small")
        }
    }
}

// 默认样式导航栏视图
struct DefaultNavView: View {
    var body: some View {
        Text("默认样式导航栏页面")
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("默认标题")
                        .font(.custom(Fonts.typeVFNormalBold.rawValue, size: 12))
                        .foregroundColor(Color.audi.barContent)
                }
            }
            .toolbarBackground(Color.audi.barBackground, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbarColorScheme(.light, for: .navigationBar)
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: backButton)
    }
    
    private var backButton: some View {
        Button(action: {
            // 返回逻辑
        }) {
            Image("back-small")
        }
    }
}

方法2：基于UINavigationBarAppearance的视图级配置（兼容iOS15+） #

如果需要保留UIKit的配置方式，需为每个样式创建独立的UINavigationBarAppearance实例，并在视图的生命周期回调中针对当前导航栏设置：

struct ScrollDependentNavView: View {
    @State private var scrollY: CGFloat = 0
    
    var body: some View {
        ScrollView {
            // 滚动内容，这里假设通过ScrollViewReader或GeometryReader获取scrollY值
        }
        .onAppear {
            updateNavStyle(scrollY: scrollY)
        }
        .onDisappear {
            // 离开视图时恢复默认样式
            resetToDefaultNavStyle()
        }
        .onChange(of: scrollY) { newValue in
            updateNavStyle(scrollY: newValue)
        }
    }
    
    private func updateNavStyle(scrollY: CGFloat) {
        let appearance: UINavigationBarAppearance
        
        if scrollY <= 0 {
            // 创建独立的透明样式实例
            appearance = UINavigationBarAppearance()
            appearance.configureWithTransparentBackground()
            appearance.titleTextAttributes = [
                .foregroundColor: UIColor(Color.audi.barContentOverlay),
                .font: UIFont(name: Fonts.typeVFNormalBold.rawValue, size: 12)!
            ]
            appearance.shadowColor = .clear
            appearance.setBackIndicatorImage(UIImage(named: "back-white-small")!, transitionMaskImage: UIImage(named: "back-white-small")!)
        } else {
            // 创建独立的默认样式实例
            appearance = UINavigationBarAppearance()
            appearance.backgroundColor = UIColor(Color.audi.barBackground)
            appearance.titleTextAttributes = [
                .foregroundColor: UIColor(Color.audi.barContent),
                .font: UIFont(name: Fonts.typeVFNormalBold.rawValue, size: 12)!
            ]
            appearance.shadowColor = UIColor(Color.audi.barTopSeparator)
            appearance.setBackIndicatorImage(UIImage(named: "back-small")!, transitionMaskImage: UIImage(named: "back-small")!)
        }
        
        // 获取当前视图所在的导航栏，而非全局设置
        if let navBar = UIApplication.shared.windows.first?.rootViewController?.navigationController?.navigationBar {
            navBar.standardAppearance = appearance
            navBar.compactAppearance = appearance
            navBar.scrollEdgeAppearance = appearance
            navBar.layoutIfNeeded()
        }
    }
    
    private func resetToDefaultNavStyle() {
        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = UIColor(Color.audi.barBackground)
        appearance.titleTextAttributes = [
            .foregroundColor: UIColor(Color.audi.barContent),
            .font: UIFont(name: Fonts.typeVFNormalBold.rawValue, size: 12)!
        ]
        appearance.shadowColor = UIColor(Color.audi.barTopSeparator)
        appearance.setBackIndicatorImage(UIImage(named: "back-small")!, transitionMaskImage: UIImage(named: "back-small")!)
        
        if let navBar = UIApplication.shared.windows.first?.rootViewController?.navigationController?.navigationBar {
            navBar.standardAppearance = appearance
            navBar.compactAppearance = appearance
            navBar.scrollEdgeAppearance = appearance
        }
    }
}

关键注意事项 #

• 禁止共享UINavigationBarAppearance实例，每次配置样式都创建新实例，避免样式覆盖。
• 优先使用SwiftUI原生Toolbar修饰器，更适配SwiftUI的视图生命周期和状态管理。
• 在视图onDisappear回调中恢复默认样式，防止影响后续页面的导航栏配置。

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