SwiftUI中的EnvironmentalModifier是什么？有哪些具体使用示例？

EnvironmentalModifier是SwiftUI提供的面向视图修饰符的协议，和常用的往环境中写入值的environment(_:_:)视图修饰符没有关联。
它的核心特点是修饰符本身不内置固定的修改逻辑，需要在视图渲染前从当前所处的环境中读取对应配置，动态解析生成最终生效的具体修饰符，最终的展示效果会跟随环境值的变化自动更新。

常见的系统内置font()、foregroundColor()、tint()等修饰符底层都是基于这个协议实现的：父容器设置的修饰值会存入环境，所有子视图对应修饰符会自动读取环境值生效，无需手动逐个传参。

我们可以通过实现该协议做一个跟随全局主题自动切换样式的卡片修饰符：

步骤1：定义环境存储的主题配置 #

// 主题枚举
enum AppTheme {
    case light, dark, vivid
}

// 自定义环境Key
private struct AppThemeKey: EnvironmentKey {
    static let defaultValue: AppTheme = .light
}

extension EnvironmentValues {
    var appTheme: AppTheme {
        get { self[AppThemeKey.self] }
        set { self[AppThemeKey.self] = newValue }
    }
}

步骤2：实现遵循EnvironmentalModifier协议的修饰符 #

struct ThemeCardModifier: EnvironmentalModifier {
    // 协议要求实现的resolve方法：从环境读取值，返回实际生效的修饰符
    func resolve(in environment: EnvironmentValues) -> some ViewModifier {
        switch environment.appTheme {
        case .light:
            return CardModifier(bgColor: .white, shadowColor: .gray.opacity(0.3))
        case .dark:
            return CardModifier(bgColor: .darkGray, shadowColor: .black.opacity(0.5))
        case .vivid:
            return CardModifier(bgColor: .cyan.opacity(0.2), shadowColor: .blue.opacity(0.4))
        }
    }
    
    // 实际承载样式逻辑的具体修饰符
    private struct CardModifier: ViewModifier {
        let bgColor: Color
        let shadowColor: Color
        
        func body(content: Content) -> some View {
            content
                .padding()
                .background(bgColor)
                .cornerRadius(12)
                .shadow(color: shadowColor, radius: 6, x: 0, y: 2)
        }
    }
}

// 扩展View简化调用
extension View {
    func themeCard() -> some View {
        modifier(ThemeCardModifier())
    }
}

步骤3：调用效果 #

struct DemoView: View {
    @State private var currentTheme: AppTheme = .light
    
    var body: some View {
        VStack(spacing: 20) {
            Text("主题卡片1")
                .themeCard()
            Text("主题卡片2")
                .themeCard()
            
            Button("切换主题") {
                currentTheme = switch currentTheme {
                case .light: .dark
                case .dark: .vivid
                case .vivid: .light
                }
            }
        }
        .padding()
        // 仅需在父层修改环境值，所有子视图的themeCard样式自动同步更新
        .environment(\.appTheme, currentTheme)
    }
}

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