iOS 15中如何通过SwiftUI扩展修改导航栏为红色

要给导航栏设置红色背景，你可以在现有视图扩展的基础上，结合SwiftUI不同版本的API来实现，以下是分场景的解决方案：

适配 iOS 16+（推荐原生SwiftUI API） #

iOS 16之后提供了toolbarBackground直接设置导航栏背景，把这个逻辑整合到你的扩展里即可：

extension View {
    func createToolbarSettings(dismissAction: (() -> Void)?, title: LocalizedStringKey, tag: String) -> some View {
        self
            .toolbar(content: {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        dismissAction?()
                    }, label: {
                        Image.arrowBack
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: .genericFrame, height: .genericFrame)
                    })
                    .tag(tag)
                }
                ToolbarItem(placement: .principal) {
                    Text(title)
                        .font(.montserratFontMapping(ofSize: .genericFrame, weight: .medium))
                        .foregroundColor(.white)
                }
            })
            // 设置导航栏背景为红色
            .toolbarBackground(.red, for: .navigationBar)
            // 强制使用深色配色，保证文字/图标显示为白色（按需调整）
            .toolbarColorScheme(.dark, for: .navigationBar)
    }
}

适配 iOS 13-15（通过UIKit桥接） #

对于iOS 16之前的版本，需要修改UINavigationBar的外观配置，同样可以嵌入到你的扩展中：

extension View {
    func createToolbarSettings(dismissAction: (() -> Void)?, title: LocalizedStringKey, tag: String) -> some View {
        self
            .toolbar(content: {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        dismissAction?()
                    }, label: {
                        Image.arrowBack
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: .genericFrame, height: .genericFrame)
                    })
                    .tag(tag)
                }
                ToolbarItem(placement: .principal) {
                    Text(title)
                        .font(.montserratFontMapping(ofSize: .genericFrame, weight: .medium))
                        .foregroundColor(.white)
                }
            })
            .onAppear {
                let appearance = UINavigationBarAppearance()
                // 设置背景色为红色
                appearance.backgroundColor = .red
                // 配置标题文字颜色
                appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
                appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
                
                // 应用配置到导航栏
                UINavigationBar.appearance().standardAppearance = appearance
                UINavigationBar.appearance().scrollEdgeAppearance = appearance
            }
    }
}

多版本兼容的完整扩展 #

如果需要同时覆盖新老系统版本，可以用条件编译做兼容：

extension View {
    func createToolbarSettings(dismissAction: (() -> Void)?, title: LocalizedStringKey, tag: String) -> some View {
        self
            .toolbar(content: {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        dismissAction?()
                    }, label: {
                        Image.arrowBack
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: .genericFrame, height: .genericFrame)
                    })
                    .tag(tag)
                }
                ToolbarItem(placement: .principal) {
                    Text(title)
                        .font(.montserratFontMapping(ofSize: .genericFrame, weight: .medium))
                        .foregroundColor(.white)
                }
            })
            // iOS 16+ 原生API
            .toolbarBackground(.red, for: .navigationBar)
            .toolbarColorScheme(.dark, for: .navigationBar)
            // iOS 13-15 兼容逻辑
            .onAppear {
                if #available(iOS 16, *) { return }
                let appearance = UINavigationBarAppearance()
                appearance.backgroundColor = .red
                appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
                appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
                
                UINavigationBar.appearance().standardAppearance = appearance
                UINavigationBar.appearance().scrollEdgeAppearance = appearance
            }
    }
}

使用示例 #

在你的视图中直接调用这个扩展方法即可：

struct DemoView: View {
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        Text("导航栏红色背景测试")
            .createToolbarSettings(dismissAction: { dismiss() }, title: "测试页面", tag: "demoTag")
    }
}

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