如何在WatchOS中设置导航栏标题的颜色

适配方案 #

方案1：适配WatchOS 10及以上版本 #

WatchOS 10 新增了toolbar相关API，可以直接自定义导航栏标题的样式，修改后的代码如下：

@main
struct GiveBloodApp: App {
    @StateObject var appModel = AppModel()

    @SceneBuilder var body: some Scene {
        WindowGroup {
            NavigationView {
                Text("Hello World").multilineTextAlignment(.center)
                    .navigationTitle("My App")
                    // 自定义导航栏标题视图
                    .toolbar {
                        ToolbarItem(placement: .principal) {
                            Text("My App")
                                .foregroundColor(.blue)
                        }
                    }
            }
        }
    }
}

方案2：兼容全版本全局设置 #

如果需要兼容WatchOS 9及更低版本，可以通过修改UINavigationBar全局外观实现效果，修改后的代码如下：

@main
struct GiveBloodApp: App {
    @StateObject var appModel = AppModel()
    
    init() {
        // 全局修改导航栏标题颜色
        UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.blue]
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.blue]
    }

    @SceneBuilder var body: some Scene {
        WindowGroup {
            NavigationView {
                Text("Hello World").multilineTextAlignment(.center)
                    .navigationTitle("My App")
            }
        }
    }
}

注意事项 #

• 自定义toolbar的优先级高于全局外观设置，同时使用时自定义样式会生效
• 如果你设置了自定义导航栏背景色，需要确保标题颜色和背景色的对比度符合系统无障碍要求，否则系统会自动将标题调整为高对比度的灰色
• 部分模拟器可能存在渲染bug，修改后建议在真机上验证效果

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