SwiftUI中如何修改导航栏标题颜色？

iOS 16+ 原生解决方案 #

在iOS 16及以后，SwiftUI提供了直接设置导航栏标题颜色的原生API，无需自定义扩展，用法简洁：

struct ContentView: View {
    var body: some View {
        NavigationView { // iOS 16+ 也可使用 NavigationStack
            Text("Hello, World!")
                .navigationTitle("Parent Login")
                .toolbarTitleColor(.red) // 直接设置标题颜色
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Text("Trailing")
                    }
                }
        }
    }
}

注意：原代码中使用的.navigationBarItems在iOS 16+已被废弃，推荐使用.toolbar搭配ToolbarItem来设置导航栏按钮。

兼容iOS 15及以下版本 #

如果需要适配iOS 15或更早版本，自定义Modifier是可行方案，但要避免全局修改所有导航栏外观（原代码的问题所在），应仅针对当前导航控制器的导航栏进行设置：

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .navigationTitle("Parent Login")
                .navigationBarItems(trailing: Text("Trailing"))
                .navigationBarTitleColor(.red)
        }
    }
}

extension View {
    func navigationBarTitleColor(_ color: Color) -> some View {
        modifier(NavigationBarTitleColorModifier(color: color))
    }
}

struct NavigationBarTitleColorModifier: ViewModifier {
    var color: Color
    
    func body(content: Content) -> some View {
        content
            .onAppear {
                // 获取当前导航控制器的导航栏，而非全局设置
                guard let window = UIApplication.shared.connectedScenes
                        .compactMap({ $0 as? UIWindowScene })
                        .first?.windows
                        .first,
                      let navigationController = window.rootViewController as? UINavigationController else {
                    return
                }
                
                let appearance = UINavigationBarAppearance()
                // 设置普通标题颜色
                appearance.titleTextAttributes = [.foregroundColor: UIColor(color)]
                // 设置大标题颜色
                appearance.largeTitleTextAttributes = [.foregroundColor: UIColor(color)]
                
                navigationController.navigationBar.standardAppearance = appearance
                navigationController.navigationBar.scrollEdgeAppearance = appearance
            }
            // 可选：视图消失时恢复默认外观，避免影响其他页面
            .onDisappear {
                guard let window = UIApplication.shared.connectedScenes
                        .compactMap({ $0 as? UIWindowScene })
                        .first?.windows
                        .first,
                      let navigationController = window.rootViewController as? UINavigationController else {
                    return
                }
                
                let defaultAppearance = UINavigationBarAppearance()
                navigationController.navigationBar.standardAppearance = defaultAppearance
                navigationController.navigationBar.scrollEdgeAppearance = defaultAppearance
            }
    }
}

原代码问题说明 #

你之前的自定义Modifier通过UINavigationBar.appearance()全局修改了所有导航栏的外观，这会导致App内所有导航栏的标题颜色都变成红色，而非仅当前页面。上面的兼容方案则针对当前导航控制器进行设置，避免了全局污染。

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