SwiftUI 高级特性第3章：环境与偏好设置

90后的晨仔2026-05-09 10:09

3.1 环境与偏好设置概述

在 SwiftUI 中，环境（Environment） 和 偏好设置（Preferences） 是两个强大的数据传递与共享机制，它们共同解决了视图层级中"自上而下"与"自下而上"的数据流问题：

  • 在视图层次结构中优雅地共享数据（如颜色方案、字体等系统属性）
  • 向下传递全局配置与自定义设置，实现类似"主题"系统
  • 自定义子视图的行为与外观，而无需显式传参
  • 从子视图收集尺寸、位置等信息，辅助实现复杂布局
  • 构建可维护、低耦合的全局状态管理方案

环境和偏好设置一个向下、一个向上，构成了 SwiftUI 的完整数据流转体系。

3.2 环境（Environment）

3.2.1 环境的基本概念

环境是 SwiftUI 提供的自上而下 传递数据的机制。父视图可以通过 .environment() 修饰符向视图树中注入数据，任意层级的子视图都可以通过 @Environment 属性包装器读取这些值。环境的主要优势包括：

  • 无需逐层手动传递参数，大幅减少视图间的依赖
  • 可以访问大量系统内置环境值，如 \.colorScheme、\.locale、\.font 等
  • 允许开发者注入自定义数据，构建灵活的全局配置体系

环境传递规则 ：环境值沿着视图树向下传递，且子视图会继承父视图的环境值。如果在某个节点重新设置环境值，则其下所有的子视图都会获取到新值（除非再次被覆盖）。

3.2.2 环境变量的使用

使用 @Environment 属性包装器可以轻松读取系统或自定义环境值。

swift 复制代码 
struct ContentView: View {
    @Environment(\.colorScheme) private var colorScheme
    @Environment(\.font) private var font
    @Environment(\.locale) private var locale

    var body: some View {
        VStack {
            Text("当前颜色方案：\(colorScheme == .dark ? "深色" : "浅色")")
            Text("当前字体：\(font?.description ?? "默认")")
            Text("当前区域：\(locale.identifier)")
        }
    }
}

常见的系统环境值包括：

环境键 KeyPath 说明
\.colorScheme 当前外观模式（浅色/深色）
\.font 当前默认字体
\.locale 当前区域设置（影响日期、数字格式）
\.layoutDirection 布局方向（从左到右/从右到左）
\.sizeCategory 动态字体大小类别
\.accessibilityEnabled 辅助功能是否开启
\.managedObjectContext Core Data 上下文（常用于数据持久化）
\.scenePhase 当前场景状态（前台、后台等）

这些值都是只读的，由系统或父视图注入。

3.2.3 自定义环境键

除了系统内置环境值，我们还可以定义自己的环境键，用以传递任意数据。

创建步骤：

  1. 定义一个遵循 EnvironmentKey 协议的类型，并指定默认值
  2. 扩展 EnvironmentValues，添加对应的读写属性
  3. 在父视图中使用 .environment() 设置值，在子视图用 @Environment 读取
swift 复制代码 
// 1. 定义自定义环境键
struct UserNameKey: EnvironmentKey {
    static let defaultValue: String = "Guest"
}

// 2. 扩展EnvironmentValues
extension EnvironmentValues {
    var userName: String {
        get { self[UserNameKey.self] }
        set { self[UserNameKey.self] = newValue }
    }
}

// 3. 在子视图读取
struct ContentView: View {
    @Environment(\.userName) private var userName
    
    var body: some View {
        Text("欢迎，\(userName)！")
    }
}

// 4. 父视图设置环境值
struct ParentView: View {
    var body: some View {
        ContentView()
            .environment(\.userName, "张三")
    }
}

补充知识点 - 环境值的优先级 ：

如果多个父视图同时设置了同一个环境键，离子视图最近的那个设置会生效 。这是因为环境值的读取类似于"从树中向上查找"，直到找到最近的一个被显式设置的值，否则使用 defaultValue。

3.2.4 环境修饰符

.environment(_:_:) 是最主要的环境修饰符，可以为一个视图分支注入指定值。此外，还可以通过 环境 Object 传递可观察对象，实现更复杂的全局状态共享。

补充：@EnvironmentObject
@EnvironmentObject 是另一种"环境"机制，专门用于传递遵循 ObservableObject 的引用类型对象。它和 @Environment 的区别在于：

  • @Environment 适合值类型 或简单配置数据（如 Bool、String、Theme 结构体）
  • @EnvironmentObject 适合需要自动更新视图 的共享数据源（如 UserSettings、AppModel）
  • @EnvironmentObject 不需要自定义环境键，只要在父视图使用 .environmentObject(someObject)，子视图用 @EnvironmentObject var model: SomeModel 声明即可
  • @EnvironmentObject 必须由某个祖先视图提供对象，否则运行时会崩溃；而 @Environment 有默认值，总是安全的
swift 复制代码 
class AppSettings: ObservableObject {
    @Published var fontSize: CGFloat = 16
}

struct ParentView: View {
    @StateObject private var settings = AppSettings()
    var body: some View {
        ChildView()
            .environmentObject(settings)
    }
}

struct ChildView: View {
    @EnvironmentObject var settings: AppSettings
    var body: some View {
        Text("字体大小：\(settings.fontSize)")
    }
}

最佳实践 ：简单配置用 @Environment + 自定义环境键，复杂且需要响应变化的业务状态用 @EnvironmentObject。

3.3 偏好设置（Preferences）

3.3.1 偏好设置的基本概念

偏好设置是 SwiftUI 提供的自下而上 传递数据的机制。子视图可以向上报告自身信息（如尺寸、坐标、自定义值等），父视图通过一个 Reduce 函数汇总所有子视图上报的数据，最终拿到一个合并后的结果。

常见应用场景：

  • 获取子视图的几何尺寸（如最大宽度）
  • 实现"视图跟随滚动"等需要坐标计算的交互
  • 收集子视图的自定义属性，供父视图决策布局

3.3.2 偏好键（PreferenceKey）的使用

创建一个偏好键需要实现 PreferenceKey 协议，并提供一个 reduce 静态方法，用来将新上报的值合并到当前累积值中。

swift 复制代码 
// 1. 定义偏好键
struct MaxWidthKey: PreferenceKey {
    static let defaultValue: CGFloat = 0
    
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

// 2. 便捷扩展
extension View {
    func maxWidth(_ width: CGFloat) -> some View {
        preference(key: MaxWidthKey.self, value: width)
    }
}

// 3. 父视图收集偏好数据
struct ContentView: View {
    @State private var maxWidth: CGFloat = 0
    
    var body: some View {
        VStack {
            Text("最大宽度：\(maxWidth)")
            HStack {
                Text("短文本").maxWidth(50)
                Text("较长的文本").maxWidth(100)
                Text("非常长的文本内容").maxWidth(200)
            }
            .onPreferenceChange(MaxWidthKey.self) { width in
                maxWidth = width
            }
        }
    }
}

补充知识点 - reduce 的执行逻辑

SwiftUI 会从最底层的子视图开始向上遍历，并逐个调用 reduce(value:nextValue:)。每次调用，value 都是当前累积的结果，nextValue 是当前子视图上报的新值。开发者可以自定义合并策略：

  • max/min：取极值（如最大宽度、最小高度）
  • +：求和（如所有子视图总高度）
  • append：拼接（如所有文字拼接成一段完整内容）

3.3.3 高级偏好设置技巧

1. transformPreference

有时我们不直接设置偏好值，而是希望在原有上报值的基础上进行变换或调整，这时可以使用 .transformPreference(_:_:)。它允许访问当前偏好值并修改。

swift 复制代码 
Text("可调整宽度的文本")
    .preference(key: WidthKey.self, value: 100)
    .transformPreference(WidthKey.self) { value in
        // 在原本上报值上加 10pt 内边距
        value += 10
    }

2. anchorPreference

当我们需要获取某个子视图的几何信息（如位置、尺寸）时，可以使用 .anchorPreference。它会生成一个基于视图坐标空间的 Anchor，父视图通过 GeometryReader 将其解析为具体坐标值，非常适合实现"弹出菜单跟随按钮"等效果。

swift 复制代码 
struct AnchorDemo: View {
    var body: some View {
        HStack {
            Text("点击")
                .anchorPreference(key: BoundsKey.self, value: .bounds) { $0 }
        }
        .onPreferenceChange(BoundsKey.self) { anchors in
            // anchors 中记录了每个子视图的 bounds 锚点
        }
    }
}

3. 注意更新时序与性能

  • onPreferenceChange 会在视图更新阶段之后调用，因此不能在其中直接修改影响当前布局的状态，否则可能引发循环更新。建议将获取到的值存储到一个不影响当前视图布局的 @State 中，或在 DispatchQueue.main.async 中延迟处理。
  • 偏好设置会在视图树更新时重新计算，因此尽量不要上报过于频繁变化的数据（如实时手指位置），可以适当节流。

3.4 环境与偏好设置的应用

3.4.1 主题系统

利用环境传递一个 Theme 结构体，可以轻松统一管理应用的外观。

swift 复制代码 
struct Theme {
    let primaryColor: Color
    let secondaryColor: Color
    let backgroundColor: Color
    let textColor: Color
}

struct ThemeKey: EnvironmentKey {
    static let defaultValue: Theme = Theme(
        primaryColor: .blue,
        secondaryColor: .gray,
        backgroundColor: .white,
        textColor: .black
    )
}

extension EnvironmentValues {
    var theme: Theme {
        get { self[ThemeKey.self] }
        set { self[ThemeKey.self] = newValue }
    }
}

struct ThemedButton: View {
    let title: String
    let action: () -> Void
    
    @Environment(\.theme) private var theme
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .padding()
                .background(theme.primaryColor)
                .foregroundColor(.white)
                .cornerRadius(10)
        }
    }
}

3.4.2 全局设置

将应用的配置信息（如通知开关、语言、字体大小）封装成结构体，通过环境传递，配合 @Environment 或 Binding 进行双向绑定修改（需要自定义环境键支持 Binding）。

swift 复制代码 
struct AppSettings {
    var enableNotifications: Bool = true
    var language: String = "zh-CN"
    var fontSize: CGFloat = 16
}

struct SettingsKey: EnvironmentKey {
    static let defaultValue: AppSettings = AppSettings()
}

extension EnvironmentValues {
    var settings: AppSettings {
        get { self[SettingsKey.self] }
        set { self[SettingsKey.self] = newValue }
    }
}

// 注意：如果想用 Binding 直接修改，需要借助额外的包装器，
// 或使用 @Environment(\.settings) 配合自定义 ViewModifier 来实现。

3.5 环境与偏好设置的最佳实践

  1. 职责分明 ：@Environment 用于读取配置，@EnvironmentObject 用于共享可观察模型；偏好设置用于自下而上的数据收集。
  2. 避免滥用：并非所有数据都适合通过环境传递。明确的参数传递更利于代码可读性和可测试性。
  3. 合理默认值 ：始终为环境键和偏好键提供合理的 defaultValue，确保即使父视图未设置也能安全运行。
  4. 命名清晰 ：使用描述性强的键名称（如 \.theme、\.userName），避免冲突和歧义。
  5. reduce 算法正确 ：确保 PreferenceKey 的 reduce 方法满足结合律，例如求和、取最大、合并集合，防止因遍历顺序不同导致结果不一致。
  6. 性能警觉 ：
    • 不要在高频更新的偏好变化中执行昂贵的计算。
    • onPreferenceChange 里避免直接修改布局相关状态引发循环更新。
    • 对于只需要一次的几何信息，考虑使用 GeometryReader 直接获取，而不是偏好设置。

3.6 综合示例

下面是一个综合了环境（自定义主题、用户名）与偏好设置（子视图最大宽度收集）的完整示例，展示了从主题切换、用户输入到信息收集的完整流程。

swift 复制代码 
// 环境与偏好设置示例
struct EnvironmentAndPreferencesDemo: View {
    @State private var currentTheme: Theme = .light
    @State private var userName: String = "张三"
    @State private var maxItemWidth: CGFloat = 0
    
    let menuItems = [
        "首页", "产品", "服务", "关于我们", "联系我们"
    ]
    
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                // 标题
                Text("环境与偏好设置")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(currentTheme.primaryColor)
                
                // 主题切换
                VStack {
                    Text("1. 主题系统")
                        .font(.headline)
                        .fontWeight(.semibold)
                    
                    HStack {
                        Button("浅色主题") { currentTheme = .light }
                            .padding()
                            .background(currentTheme == .light ? currentTheme.primaryColor : .gray)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                        
                        Button("深色主题") { currentTheme = .dark }
                            .padding()
                            .background(currentTheme == .dark ? currentTheme.primaryColor : .gray)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    
                    // 主题预览
                    VStack {
                        Text("主题预览")
                            .font(.headline)
                        Rectangle()
                            .fill(currentTheme.backgroundColor)
                            .frame(height: 200)
                            .overlay(
                                VStack {
                                    Text("示例文本")
                                        .foregroundColor(currentTheme.textColor)
                                    Button("示例按钮") {}
                                        .padding()
                                        .background(currentTheme.primaryColor)
                                        .foregroundColor(.white)
                                        .cornerRadius(10)
                                }
                            )
                            .cornerRadius(10)
                    }
                    .padding()
                }
                .padding()
                .background(currentTheme.backgroundColor.opacity(0.5))
                .cornerRadius(10)
                
                // 环境变量
                VStack {
                    Text("2. 环境变量")
                        .font(.headline)
                        .fontWeight(.semibold)
                    
                    HStack {
                        Text("用户名：")
                        TextField("输入用户名", text: $userName)
                            .padding()
                            .border(.gray)
                            .cornerRadius(5)
                    }
                    
                    UserGreeting()
                        .environment(\.userName, userName)
                }
                .padding()
                .background(.blue.opacity(0.1))
                .cornerRadius(10)
                
                // 偏好设置
                VStack {
                    Text("3. 偏好设置")
                        .font(.headline)
                        .fontWeight(.semibold)
                    
                    Text("菜单项最大宽度：\(maxItemWidth)")
                    
                    HStack(spacing: 10) {
                        ForEach(menuItems, id: \.self) { item in
                            Text(item)
                                .padding()
                                .background(.gray.opacity(0.1))
                                .cornerRadius(8)
                                .background(GeometryReader { geometry in
                                    Color.clear.preference(
                                        key: MaxWidthKey.self,
                                        value: geometry.size.width
                                    )
                                })
                        }
                    }
                    .onPreferenceChange(MaxWidthKey.self) { width in
                        maxItemWidth = width
                    }
                }
                .padding()
                .background(.green.opacity(0.1))
                .cornerRadius(10)
            }
            .padding()
        }
    }
}

// 主题定义
extension EnvironmentAndPreferencesDemo {
    enum Theme {
        case light
        case dark
        
        var primaryColor: Color {
            switch self {
            case .light: return .blue
            case .dark: return .purple
            }
        }
        
        var backgroundColor: Color {
            switch self {
            case .light: return .white
            case .dark: return .black
            }
        }
        
        var textColor: Color {
            switch self {
            case .light: return .black
            case .dark: return .white
            }
        }
    }
}

// 用户名环境键
struct UserNameKey: EnvironmentKey {
    static let defaultValue: String = "Guest"
}

extension EnvironmentValues {
    var userName: String {
        get { self[UserNameKey.self] }
        set { self[UserNameKey.self] = newValue }
    }
}

// 用户问候视图
struct UserGreeting: View {
    @Environment(\.userName) private var userName
    
    var body: some View {
        Text("欢迎，\(userName)！")
            .font(.headline)
            .padding()
            .background(.blue.opacity(0.1))
            .cornerRadius(10)
    }
}

// 最大宽度偏好键
struct MaxWidthKey: PreferenceKey {
    static let defaultValue: CGFloat = 0
    
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

3.7 总结

环境与偏好设置是 SwiftUI 中构建灵活、可组合界面不可或缺的工具。通过本章的学习，你已掌握：

  • 如何使用 @Environment 读取系统及自定义环境值
  • 如何创建自定义环境键，实现主题、全局配置的自动注入
  • @EnvironmentObject 与 @Environment 的适用场景区别
  • 如何利用 PreferenceKey 从子视图收集信息
  • transformPreference 和 anchorPreference 等进阶技巧
  • 在实际项目中如何合理运用它们，避免性能陷阱

灵活运用这两个机制，可以让你的 SwiftUI 代码更加简洁、模块化，同时保持强大的表达能力。无论是个性化主题、动态字号支持，还是复杂的自定义容器布局，环境与偏好设置都能助你一臂之力。

相关推荐
Digitally4 小时前
如何将短信从 iPhone 传输到 Mac？
macos·ios·iphone
MonkeyKing71554 小时前
iOS 开发 UIView 与 CALayer 关系及渲染流程
ios·面试
Front思4 小时前
安卓证书申请 + iOS 证书申请（含 Windows 无 Mac 方案）+ HBuilderX 云打包配置
android·macos·ios
库奇噜啦呼4 小时前
【iOS】源码学习-类的结构分析
学习·ios·cocoa
ii_best4 小时前
ios/安卓脚本工具开发按键精灵脚本常见运行时错误与解决方法
android·ios·自动化
MonkeyKing71554 小时前
iOS 开发 内存泄漏常见场景及检测方案
ios·面试
UnicornDev5 小时前
从零开始学iOS开发（第四十五篇）：SwiftUI 数据可视化进阶 —— 构建交互式图表与仪表盘
ios
jerrywus1 天前
别再陪 AI 调 iOS 了：用 cmux + baguette，让 Claude 在你的模拟器里"自己动手"
前端·ios·claude
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03零基础教你claude code 接入 deepseek V404要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法05Dirtyfrag漏洞：我花了一下午搞清楚这个Linux内核提权漏洞到底在搞什么06CC-Switch & Claude 基于 Linux 服务器安装使用指南07【AI】2026 年具身智能模型和世界模型总结08裂开！ChatGPT 居然开始要手机号验证，附详细解决方法09Linux 核弹级高危漏洞 CVE-2026-31431 完整修复指南10CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录