SwiftUI iOS 15 如何修改导航栏元素颜色 升级Xcode13后代码失效

问题原因 #

• 你提供的代码存在语法错误：UINavigationBar.appearance().scrollEdgeAppearance appearance 行漏了赋值符号=，导致滚动边缘的外观配置没有生效
• iOS 15对导航栏渲染逻辑做了调整，默认滚动到页面边缘时导航栏会自动切换为透明样式，同时UIKit的外观动态颜色适配和SwiftUI渲染逻辑存在兼容问题，会导致暗黑模式下颜色不生效

修复方案 #

方案1：修复现有UIKit外观适配代码 #

补全语法错误，同时明确指定暗黑模式下的颜色适配规则，代码可直接写在App结构体的初始化方法中全局生效：

init() {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    // 明确配置适配明暗模式的动态颜色
    appearance.backgroundColor = UIColor { traitCollection in
        traitCollection.userInterfaceStyle == .dark ? .black : .white
    }
    appearance.titleTextAttributes = [.foregroundColor: UIColor { traitCollection in
        traitCollection.userInterfaceStyle == .dark ? .white : .black
    }]
    appearance.largeTitleTextAttributes = appearance.titleTextAttributes

    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().compactAppearance = appearance
    UINavigationBar.appearance().scrollEdgeAppearance = appearance // 补全缺失的赋值符号
    UINavigationBar.appearance().tintColor = UIColor { traitCollection in
        traitCollection.userInterfaceStyle == .dark ? .white : .systemBlue
    }
}

方案2：使用iOS 15+ SwiftUI原生API（更推荐） #

iOS 15开始SwiftUI新增了导航栏专属的样式修饰符，不需要桥接UIKit，适配稳定性更高：

NavigationStack { // 旧版本使用NavigationView也可兼容
    // 你的页面内容
    List {
        Text("测试内容")
    }
    .navigationTitle("页面标题")
    // 强制导航栏背景不透明
    .toolbarBackground(.visible, for: .navigationBar)
    // 设置导航栏背景色，自动适配明暗模式
    .toolbarBackground(Color(UIColor.systemBackground), for: .navigationBar)
    // 设置导航栏元素的配色模式，暗黑模式下自动切换为白色
    .toolbarColorScheme(.dark, for: .navigationBar)
}

如果需要全局生效，可以自定义View modifier统一调用即可。

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