自定义Trait与UITraitBridgedEnvironmentKey无法同步至UITraitCollection

我尝试在SwiftUI应用中创建自定义UI Trait及匹配的桥接SwiftUI环境键，期望在Swift视图中覆盖环境键后，变更能同步反映到当前UITraitCollection中。我遵循WWDC2023相关视频的实现模式，但更新Swift环境值后，未看到变更同步到当前Trait集合中。

原代码实现 #

// Setup
enum CustomTheme: String, Codable {
    case theme1 = "theme1",
         theme2 = "theme2"
}
 
struct customThemeTrait: UITraitDefinition {
    static let defaultValue = brand.theme1
    static let affectsColorAppearance = true
    static let identifier = "com.appName.customTheme"
    
}
extension UITraitCollection {
    var customTheme: CustomTheme { self[customThemeTrait.self] }
}
extension UIMutableTraits {
    var customTheme: CustomTheme {
        get { self[customThemeTrait.self] }
        set { self[customThemeTrait.self] = newValue }
    }
}
 
private struct customThemeKey: EnvironmentKey {
    static let defaultValue: CustomTheme = .theme1
}
 
extension customThemeKey: UITraitBridgedEnvironmentKey {
    static func read(from traitCollection: UITraitCollection) -> CustomTheme {
        traitCollection.customTheme
    }
    static func write(to mutableTraits: inout UIMutableTraits, value: CustomTheme) {
        mutableTraits.customTheme = value
    }
}
extension EnvironmentValues {
    var customTheme: CustomTheme {
        get { self[customThemeKey.self] }
        set { self[customThemeKey.self] = newValue }
    }
}



// Attempted Usage

extension Color {
    static func primaryBackground() -> Color {
        UITraitCollection.current.customTheme == .theme1 ? Color.red : Color.blue
    }
}
 
struct ContentView: View {
    @State private var theme = .theme1
 
    var body: some View {
        if (dataHasLoaded && themeIsSet) {
            HomeView()
            .environment(\.customTheme, theme)
        } else {
            SelectThemeView( theme: self.theme, setContentThemeHandler)
        }
    }
 
    func setContentThemeHandler(theme: customTheme) { 
        self.theme = theme
    }
}


struct HomeView() {
    @Environment(\.customTheme) private var currentTheme: customTheme    
var body: some View {
        VStack {
            Text("currentTheme: \(currentTheme.rawValue)")
                .background(Color.primaryBackground())
            Text("currentUITrait: \(UITraitCollection.current.customTheme.rawValue)")
                .background(Color.primaryBackground())
        }
    }
}

问题现象 #

选择theme2并导航到HomeView后，背景仍为红色，输出如下：

currentTheme: theme2
currentUITrait: theme1 // 不符合预期

问题原因与修正步骤 #

1. 命名规范与笔误修正 #

Swift类型遵循大驼峰命名规则，同时原代码中brand.theme1属于笔误，应改为CustomTheme.theme1：

struct CustomThemeTrait: UITraitDefinition {
    static let defaultValue = CustomTheme.theme1
    static let affectsColorAppearance = true
    static let identifier = "com.appName.customTheme"
}

// 同步修改UITraitCollection和UIMutableTraits的扩展中的引用
extension UITraitCollection {
    var customTheme: CustomTheme { self[CustomThemeTrait.self] }
}
extension UIMutableTraits {
    var customTheme: CustomTheme {
        get { self[CustomThemeTrait.self] }
        set { self[CustomThemeTrait.self] = newValue }
    }
}

2. 避免使用全局UITraitCollection.current #

UITraitCollection.current是线程全局的Trait集合，SwiftUI通过environment设置的环境键只会影响当前视图树关联的Trait环境，不会修改全局实例。要在SwiftUI中获取对应环境的Trait，需通过以下方式：

• 直接使用@Environment(\.customTheme)读取环境值（推荐）
• 若需在UIKit代码中访问，需通过UIViewRepresentable桥接，获取视图关联的traitCollection

3. 修正颜色方法的实现 #

将Color.primaryBackground()改为依赖环境值，而非全局Trait：

extension Color {
    static func primaryBackground(for theme: CustomTheme) -> Color {
        theme == .theme1 ? .red : .blue
    }
}

// 在HomeView中使用时：
Text("currentTheme: \(currentTheme.rawValue)")
    .background(Color.primaryBackground(for: currentTheme))

或者直接在视图中通过环境值判断：

.background(currentTheme == .theme1 ? Color.red : Color.blue)

4. 修正类型名大小写错误 #

代码中多处将CustomTheme错误写为小写customTheme，需统一修正：

// 修正setContentThemeHandler的参数类型
func setContentThemeHandler(theme: CustomTheme) { 
    self.theme = theme
}

// 修正HomeView中的环境值类型
struct HomeView: View {
    @Environment(\.customTheme) private var currentTheme: CustomTheme    
    // ...
}

5. 确保视图状态能触发更新 #

dataHasLoaded和themeIsSet需标记为@State或@Published属性，否则状态变更无法触发ContentView的视图刷新：

struct ContentView: View {
    @State private var theme = .theme1
    @State private var dataHasLoaded = false
    @State private var themeIsSet = false
    // ...
}

修正后的关键代码示例 #

// Setup
enum CustomTheme: String, Codable {
    case theme1 = "theme1", theme2 = "theme2"
}
 
struct CustomThemeTrait: UITraitDefinition {
    static let defaultValue = CustomTheme.theme1
    static let affectsColorAppearance = true
    static let identifier = "com.appName.customTheme"
}

extension UITraitCollection {
    var customTheme: CustomTheme { self[CustomThemeTrait.self] }
}

extension UIMutableTraits {
    var customTheme: CustomTheme {
        get { self[CustomThemeTrait.self] }
        set { self[CustomThemeTrait.self] = newValue }
    }
}
 
private struct CustomThemeKey: EnvironmentKey {
    static let defaultValue: CustomTheme = .theme1
}
 
extension CustomThemeKey: UITraitBridgedEnvironmentKey {
    static func read(from traitCollection: UITraitCollection) -> CustomTheme {
        traitCollection.customTheme
    }
    static func write(to mutableTraits: inout UIMutableTraits, value: CustomTheme) {
        mutableTraits.customTheme = value
    }
}

extension EnvironmentValues {
    var customTheme: CustomTheme {
        get { self[CustomThemeKey.self] }
        set { self[CustomThemeKey.self] = newValue }
    }
}

// Usage
extension Color {
    static func primaryBackground(for theme: CustomTheme) -> Color {
        theme == .theme1 ? .red : .blue
    }
}

struct ContentView: View {
    @State private var theme = CustomTheme.theme1
    @State private var dataHasLoaded = false
    @State private var themeIsSet = false

    var body: some View {
        if dataHasLoaded && themeIsSet {
            HomeView()
                .environment(\.customTheme, theme)
        } else {
            SelectThemeView(theme: theme, setContentThemeHandler)
        }
    }

    func setContentThemeHandler(theme: CustomTheme) {
        self.theme = theme
        self.themeIsSet = true
    }
}

struct HomeView: View {
    @Environment(\.customTheme) private var currentTheme: CustomTheme

    var body: some View {
        VStack {
            Text("currentTheme: \(currentTheme.rawValue)")
                .background(Color.primaryBackground(for: currentTheme))
            // 用于验证视图关联的TraitCollection
            TraitCheckerView()
        }
    }
}

// 桥接UIView验证视图关联的TraitCollection
struct TraitCheckerView: UIViewRepresentable {
    func makeUIView(context: Context) -> UILabel {
        UILabel()
    }

    func updateUIView(_ uiView: UILabel, context: Context) {
        let traitTheme = uiView.traitCollection.customTheme
        uiView.text = "currentUITrait: \(traitTheme.rawValue)"
        uiView.backgroundColor = traitTheme == .theme1 ? .red : .blue
    }
}

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