SwiftUI中System配色方案无法正确应用于父视图

我做了一个包含“Light”“Dark”“System”选项的Picker，每个选项对应一种配色方案。选“System”时会调用系统默认配色，但以Sheet形式呈现的AppearanceAndReadingSettingsView的父视图没法同步应用这个配色。比如从“Light”切换到“System”时，整个应用都切换成浅色模式了，但这个父Sheet视图完全没变化。我试过在父视图里加@AppStorage和.preferredColorScheme，但没用。

相关代码：

import SwiftUI

struct AppearanceAndReadingSettingsView: View {
    @AppStorage("appearanceMode") var appearanceMode = 0
    
    var body: some View {
        List {
            Picker("Theme", selection: $appearanceMode) {
                Text("Light")
                    .tag(0)
                Text("Dark")
                    .tag(1)
                Text("System")
                    .tag(2)
            }
            .pickerStyle(.segmented)
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                ClosingSheetButton()
            }
        }
        .preferredColorScheme(appearanceMode == 0 ? .light : appearanceMode == 1 ? .dark : .none )
    }
}

Sheet属于独立的视图层级，不会自动跟随全局preferredColorScheme变更，需要单独处理同步逻辑：

1. 父视图绑定外观设置并同步给Sheet #

在父视图中同样监听appearanceMode的变化，给弹出的Sheet也添加.preferredColorScheme修饰符：

struct ParentView: View {
    @AppStorage("appearanceMode") var appearanceMode = 0
    @State private var showSettingsSheet = false
    
    var body: some View {
        Button("打开设置") {
            showSettingsSheet = true
        }
        .sheet(isPresented: $showSettingsSheet) {
            AppearanceAndReadingSettingsView()
                .preferredColorScheme(colorScheme) // 为Sheet应用配色
        }
        .preferredColorScheme(colorScheme) // 父视图应用配色
    }
    
    // 统一提取配色计算逻辑，避免重复代码
    private var colorScheme: ColorScheme? {
        switch appearanceMode {
        case 0: return .light
        case 1: return .dark
        default: return .none
        }
    }
}

2. 优化设置视图的配色逻辑 #

把原设置视图中的配色计算抽成单独变量，和父视图保持一致，便于维护：

struct AppearanceAndReadingSettingsView: View {
    @AppStorage("appearanceMode") var appearanceMode = 0
    
    var body: some View {
        List {
            // Picker代码保持不变
            Picker("Theme", selection: $appearanceMode) {
                Text("Light")
                    .tag(0)
                Text("Dark")
                    .tag(1)
                Text("System")
                    .tag(2)
            }
            .pickerStyle(.segmented)
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                ClosingSheetButton()
            }
        }
        .preferredColorScheme(colorScheme)
    }
    
    private var colorScheme: ColorScheme? {
        switch appearanceMode {
        case 0: return .light
        case 1: return .dark
        default: return .none
        }
    }
}

关键原因 #

当设置preferredColorScheme(.none)时，系统会切换到全局系统配色，但Sheet视图不会自动重新读取该配置。必须通过给Sheet本身添加.preferredColorScheme修饰符，让它响应appearanceMode的变化，触发视图刷新和配色更新。

内容的提问来源于stack exchange，提问作者Ivan N.