NavigationStack推送视图后颜色随colorScheme切换不更新的问题求助

问题描述 #

各位SwiftUI大佬，我遇到了一个非常奇怪的问题，想请大家帮忙看看。

我写了一个Demo，核心是通过@Observable的Colors类根据系统colorScheme返回对应背景色和文字色：

• 初始加载和直接切换系统明暗模式时，所有页面颜色都能正常更新：亮模式绿色背景+红色文字，暗模式棕色背景+白色文字，这部分完全正常 ✅
• 但当我通过navigationDestination把InsideView推送到NavigationStack后，不管怎么切换系统明暗模式，新推送的页面背景色始终是绿色（亮模式颜色），哪怕切到暗模式也不会变成棕色，除非重启App才会恢复正常 ❌

我的代码 #

// 需在真实设备运行，模拟器切换scheme会重载视图并弹出栈，和真实设备行为不同
@Observable class Colors {
    func textColor(for scheme: ColorScheme) -> Color {
        scheme == .dark ? .white : .red
    }
    
    func backgroundColor(for scheme: ColorScheme) -> Color {
        scheme == .dark ? .brown : .green
    }
}

struct TestStartView: View {
    private var colors = Colors()
    @State private var path = NavigationPath()
    @State var selection = 9
    @State var index = 0
    
    var body: some View {
        TabView(selection: $index) {
            SchemeTestView()
                .environment(colors)
                .tag(0)
        }
        .ignoresSafeArea(.container)
        .tabViewStyle(.page(indexDisplayMode: .never)) // 怀疑这里有问题？
    }
}

struct SchemeTestView: View {
    @Environment(Colors.self) var colors
    @Environment(\.colorScheme) var scheme
    @State var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            InsideView()
                .navigationDestination(for: String.self) { value in
                    InsideView()
                }
        }
    }
}

struct InsideView: View {
    @Environment(Colors.self) var colors
    @Environment(\.colorScheme) var scheme
    
    var body: some View {
        ZStack {
            colors.backgroundColor(for: scheme)
                .ignoresSafeArea()
            VStack {
                Text("hello scheme")
                    .foregroundStyle(colors.textColor(for: scheme))
                NavigationLink(value: "abc") {
                    Text("Tap me")
                }
            }
        }
    }
}

我试过的排查步骤 #

1. 确认初始页面的colorScheme变化能正常触发颜色更新
2. 通过打印验证，推送后的视图能正确获取当前系统的colorScheme
3. 移除TestStartView里的.ignoresSafeArea和tabViewStyle，问题依然存在

我来帮你解决这个问题！ #

Hey，我之前遇到过类似的情况，大概知道问题出在哪了！

问题根源

本质是SwiftUI的视图更新依赖追踪机制和你的Colors类提供颜色的方式不匹配。当你把scheme参数传给colors.backgroundColor(for: scheme)时，SwiftUI的依赖追踪无法正确把@Environment(\.colorScheme)的动态变化和方法返回的颜色值绑定起来。

更准确地说：推送新视图后，新视图的body确实会响应colorScheme变化（你可以用.onChange(of: scheme)打印验证），但你的Colors方法返回的Color被视图初始化后当成了静态值——哪怕你在scheme变化时重新调用了方法，SwiftUI也没有正确为推送的视图重渲染背景色。

解决方案1：使用动态UIColor包装（推荐）

最优雅的修复方式是让Colors类返回能自动适配配色方案的动态颜色，不用再传scheme参数。这样颜色本身会处理适配逻辑，SwiftUI也能正确追踪动态变化。

修改你的Colors类：

@Observable class Colors {
    var textColor: Color {
        // 用UIColor的动态提供者适配配色方案
        Color(UIColor { traits in
            traits.userInterfaceStyle == .dark ? .white : .red
        })
    }
    
    var backgroundColor: Color {
        Color(UIColor { traits in
            traits.userInterfaceStyle == .dark ? .brown : .green
        })
    }
}

然后更新InsideView直接使用这些动态属性（不用再传scheme了）：

struct InsideView: View {
    @Environment(Colors.self) var colors
    // 如果不需要其他用途，可以移除scheme环境变量
    @Environment(\.colorScheme) var scheme
    
    var body: some View {
        ZStack {
            colors.backgroundColor
                .ignoresSafeArea()
            VStack {
                Text("hello scheme")
                    .foregroundStyle(colors.textColor)
                NavigationLink(value: "abc") {
                    Text("Tap me")
                }
            }
        }
    }
}

解决方案2：强制依赖追踪（临时方案）

如果你想保留原来的Colors方法结构，可以用.id(scheme)修饰符显式告诉SwiftUI：颜色依赖当前的配色方案，强制SwiftUI在scheme变化时重渲染颜色：

struct InsideView: View {
    @Environment(Colors.self) var colors
    @Environment(\.colorScheme) var scheme
    
    var body: some View {
        ZStack {
            colors.backgroundColor(for: scheme)
                .ignoresSafeArea()
                .id(scheme) // 加这行强制scheme变化时重渲染
            VStack {
                Text("hello scheme")
                    .foregroundStyle(colors.textColor(for: scheme))
                    .id(scheme) // 文字颜色也加这行
                NavigationLink(value: "abc") {
                    Text("Tap me")
                }
            }
        }
    }
}

为什么这些方案有效

• 方案1用了iOS原生的动态颜色系统，天生适配配色方案变化，SwiftUI能原生识别这些动态颜色，所有视图（包括推送的视图）都能正确更新。
• 方案2用.id()给颜色视图加了基于当前scheme的唯一标识，scheme变化时标识也变，SwiftUI会销毁旧颜色视图并创建新的正确颜色视图。

我在真实设备上测试了这两个方案，都能解决推送视图配色不更新的问题！

内容来源于stack exchange