SwiftUI入门学习笔记（四）：状态管理和环境变量详解

一、概述

SwiftUI采用响应式编程模式，状态变化会自动触发视图更新。状态管理和环境变量是SwiftUI中两个核心概念，它们相互配合，共同实现数据的高效管理和传递。

核心概念对比

概念 作用 数据流向 作用域
状态管理 管理数据的创建、修改和响应式更新 双向绑定 局部/全局
环境变量 在视图树中传递配置信息 自上而下 全局

二、状态管理方式

状态管理方式对比

方式 用途 作用域 关键字
@State 视图内部状态 当前视图 private
@Binding 父子视图共享 父子间传递 $前缀
@StateObject 拥有引用对象 当前视图 生命周期绑定
@ObservedObject 观察外部对象 多个视图 class类型
@EnvironmentObject 全局共享 整个视图树 环境注入

2.1 @State - 视图内部状态

struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("计数: \(count)")
            Button("+1") {
                count += 1
            }
        }
    }
}

特点：

  • 使用private修饰，封装在视图内部
  • 值类型（Int、String、Bool等）
  • 状态变化自动触发视图刷新
  • 生命周期与视图绑定

使用场景：

struct ToggleView: View {
    @State private var isOn = false
    @State private var text = ""
    
    var body: some View {
        VStack {
            Toggle("开关", isOn: $isOn)
            TextField("输入", text: $text)
        }
    }
}

2.2 @Binding - 双向绑定

// 父视图
struct ParentView: View {
    @State private var isOn = false
    
    var body: some View {
        ChildView(isOn: $isOn)
    }
}

// 子视图
struct ChildView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle("开关", isOn: $isOn)
    }
}

特点：

  • 使用$符号创建绑定引用
  • 子视图可以修改父视图的状态
  • 实现真正的双向数据同步

避免状态重复：

struct SettingsView: View {
    @Binding var darkMode: Bool
    @Binding var notifications: Bool
    
    var body: some View {
        List {
            Toggle("深色模式", isOn: $darkMode)
            Toggle("通知", isOn: $notifications)
        }
    }
}

2.3 @StateObject - 拥有引用对象

class UserSettings: ObservableObject {
    @Published var userName = "Guest"
    @Published var isDarkMode = false
    @Published var score = 0
}

struct ParentView: View {
    @StateObject var viewModel = UserSettings()
    
    var body: some View {
        ChildView(viewModel: viewModel)
    }
}

特点：

  • 拥有对象的所有权
  • 生命周期与视图绑定
  • 适合作为数据源的创建者

2.4 @ObservedObject - 观察外部对象

struct ChildView: View {
    @ObservedObject var viewModel: UserSettings
    
    var body: some View {
        VStack {
            Text("用户: \(viewModel.userName)")
            Text("分数: \(viewModel.score)")
            
            Button("加分") {
                viewModel.score += 10
            }
        }
    }
}

特点：

  • 观察外部传入的对象
  • 不拥有对象所有权
  • 适合作为数据的使用者

2.5 @EnvironmentObject - 全局共享

在应用入口注入：

@main
struct MyApp: App {
    @StateObject var settings = UserSettings()
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(settings)
        }
    }
}

在任意视图中使用：

struct AnyView: View {
    @EnvironmentObject var settings: UserSettings
    
    var body: some View {
        Text("用户: \(settings.userName)")
    }
}

优点：

  • 避免"属性钻取"（prop drilling）
  • 适合全局共享数据
  • 简化跨层级数据传递

2.6 @StateObject vs @ObservedObject

属性包装器 所有权 生命周期 适用场景
@StateObject 拥有 与视图绑定 创建数据源
@ObservedObject 不拥有 由外部管理 使用外部数据

三、环境变量

3.1 @Environment - 读取系统环境变量

struct MyView: View {
    @Environment(\.colorScheme) var colorScheme
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    @Environment(\.verticalSizeClass) var verticalSizeClass
    @Environment(\.presentationMode) var presentationMode
    @Environment(\.locale) var locale
    @Environment(\.layoutDirection) var layoutDirection
    
    var body: some View {
        Text(colorScheme == .dark ? "深色模式" : "浅色模式")
    }
}

常用系统环境变量

环境变量 类型 说明
colorScheme ColorScheme 深色/浅色模式
horizontalSizeClass UserInterfaceSizeClass 水平尺寸类别（iPad）
verticalSizeClass UserInterfaceSizeClass 垂直尺寸类别
presentationMode Binding<PresentationMode> 演示模式
locale Locale 地区设置
layoutDirection LayoutDirection 布局方向（左到右/右到左）
font Font 当前字体
imageScale Image.Scale 图片缩放比例

3.2 @EnvironmentValues - 自定义环境变量

步骤1：定义环境键

struct PrimaryColor: EnvironmentKey {
    static let defaultValue: Color = .blue
}

struct CornerRadius: EnvironmentKey {
    static let defaultValue: CGFloat = 8
}

步骤2：扩展 EnvironmentValues

extension EnvironmentValues {
    var primaryColor: Color {
        get { self[PrimaryColor.self] }
        set { self[PrimaryColor.self] = newValue }
    }
    
    var cornerRadius: CGFloat {
        get { self[CornerRadius.self] }
        set { self[CornerRadius.self] = newValue }
    }
}

步骤3：设置环境变量

struct ParentView: View {
    var body: some View {
        ChildView()
            .environment(\.primaryColor, .red)
            .environment(\.cornerRadius, 16)
    }
}

步骤4：读取环境变量

struct ChildView: View {
    @Environment(\.primaryColor) var color
    @Environment(\.cornerRadius) var radius
    
    var body: some View {
        Text("自定义样式")
            .foregroundColor(color)
            .padding()
            .background(color.opacity(0.1))
            .cornerRadius(radius)
    }
}

3.3 环境变量继承特性

struct GrandParentView: View {
    var body: some View {
        ParentView()
            .environment(\.primaryColor, .red)  // 所有子视图都可访问
    }
}

struct ParentView: View {
    var body: some View {
        VStack {
            ChildView()  // 继承 .red
            ChildView()
                .environment(\.primaryColor, .blue)  // 覆盖为 .blue
        }
    }
}

四、状态管理与环境变量的联系

4.1 核心区别

特性 状态管理 环境变量
作用范围 局部或特定视图层级 全局或整个视图树
数据流向 单向或双向绑定 自上而下传递
使用场景 组件内部状态、父子通信 全局配置、主题、跨层级通信
性能影响 局部刷新 可能触发大范围刷新
数据类型 值类型/引用类型 任意类型

4.2 配合使用示例

// 状态管理 + 环境变量 组合
class ThemeManager: ObservableObject {
    @Published var isDarkMode = false
}

struct ContentView: View {
    @StateObject private var themeManager = ThemeManager()
    
    var body: some View {
        VStack {
            Toggle("深色模式", isOn: $themeManager.isDarkMode)
            ChildView(isDarkMode: themeManager.isDarkMode)
        }
        // ❌ 错误做法：不要用 .environment(\.colorScheme) 强行覆盖系统颜色模式
        // ✅ 正确做法：通过绑定或传递参数来控制自定义视图的外观
    }
}

struct ChildView: View {
    let isDarkMode: Bool
    
    var body: some View {
        Text("当前：\(isDarkMode ? "深色" : "浅色")")
            .foregroundColor(isDarkMode ? .white : .black)
            .background(isDarkMode ? .black : .white)
    }
}

重要提示：

  • ❌ 不要用 .environment(\.colorScheme) 强行设置暗黑模式，这会破坏系统级的颜色方案
  • ✅ 应该通过状态绑定或传递参数来自定义视图外观
  • 系统的 colorScheme 应该由用户在系统设置中控制，而不是由应用强制覆盖

4.3 典型应用模式

模式1：主题管理

class ThemeSettings: ObservableObject {
    @Published var primaryColor: Color = .blue
    @Published var fontSize: CGFloat = 16
}

// 在App入口注入
@main
struct MyApp: App {
    @StateObject var theme = ThemeSettings()
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(theme)
                .environment(\.primaryColor, theme.primaryColor)
        }
    }
}

模式2：用户设置

class UserPreferences: ObservableObject {
    @Published var language = "zh-CN"
    @Published var notificationsEnabled = true
}

// 在任意视图中使用
struct SettingsView: View {
    @EnvironmentObject var preferences: UserPreferences
    
    var body: some View {
        List {
            Toggle("通知", isOn: $preferences.notificationsEnabled)
        }
    }
}

五、状态管理最佳实践

5.1 最小作用域原则

// 不好：状态定义在父视图但只在子视图使用
struct ParentView: View {
    @State private var text = ""  // 应该在ChildView中定义
    
    var body: some View {
        ChildView(text: $text)
    }
}

5.2 单一数据源原则

// 好：所有相关状态集中管理
class FormViewModel: ObservableObject {
    @Published var username = ""
    @Published var password = ""
    @Published var rememberMe = false
    
    func submit() {
        // 统一处理表单提交
    }
}

5.3 避免冗余状态

// 不好：isValid可以通过计算得到
struct LoginView: View {
    @State private var username = ""
    @State private var password = ""
    @State private var isValid = false  // 冗余
}

// 好：使用计算属性
struct LoginView: View {
    @State private var username = ""
    @State private var password = ""
    
    private var isValid: Bool {
        !username.isEmpty && password.count >= 6
    }
}

5.4 环境变量使用原则

  1. 适合全局配置：主题、语言、尺寸等
  2. 避免过度使用：只用于真正需要全局访问的数据
  3. 提供默认值：确保环境变量有合理的默认值
  4. 类型安全：使用自定义环境键确保类型安全

5.5 常见错误警示

错误1：不要用 @ObservedObject 创建对象

// ❌ 错误：@ObservedObject 不应该用来创建对象
struct BadView: View {
    @ObservedObject var viewModel = MyViewModel()  // 错误！
    
    var body: some View {
        Text("\(viewModel.data)")
    }
}

// ✅ 正确：使用 @StateObject 创建对象
struct GoodView: View {
    @StateObject var viewModel = MyViewModel()  // 正确！
    
    var body: some View {
        Text("\(viewModel.data)")
    }
}

原因： @ObservedObject 是用来观察外部传入的对象，不拥有对象所有权。如果用它创建对象，视图重建时对象会被重新创建，导致数据丢失。

错误2：不要用 .environment(.colorScheme) 强行设置暗黑模式

// ❌ 错误：强行覆盖系统颜色模式
struct BadView: View {
    @State private var isDarkMode = false
    
    var body: some View {
        ContentView()
            .environment(\.colorScheme, isDarkMode ? .dark : .light)
    }
}

// ✅ 正确：通过自定义状态控制外观
struct GoodView: View {
    @State private var isDarkMode = false
    
    var body: some View {
        ContentView(isDarkMode: isDarkMode)
    }
}

原因： colorScheme 是系统级的环境变量，应该由用户在系统设置中控制。强行覆盖会破坏系统一致性，影响用户体验。

错误3：不要混淆 @Environment 和 @EnvironmentObject

属性包装器 用途 数据类型 获取方式
@Environment 读取系统/自定义环境值 任意类型 .environment(\.key, value)
@EnvironmentObject 注入/获取 ObservableObject 必须继承 ObservableObject .environmentObject(object) 
// ❌ 错误：混淆两者
class MySettings: ObservableObject {
    @Published var theme = "light"
}

// 错误的使用方式
struct BadView: View {
    @Environment(\.theme) var theme  // 这会失败，因为 theme 不是环境键
    // 应该使用 @EnvironmentObject var settings: MySettings
}

// ✅ 正确的使用方式
struct GoodView: View {
    // 方式1：使用 @EnvironmentObject 获取 ObservableObject
    @EnvironmentObject var settings: MySettings
    
    // 方式2：使用 @Environment 获取环境值
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        Text("主题: \(settings.theme)")
    }
}

关键区别：

  • @Environment 用于值类型的环境配置（颜色模式、字体、尺寸等）
  • @EnvironmentObject 用于引用类型的全局对象（视图模型、用户设置等）
  • @Environment 需要定义 EnvironmentKey，而 @EnvironmentObject 不需要

六、完整数据流示例

// 1. 定义数据模型
class DataStore: ObservableObject {
    @Published var items: [Item] = []
    
    func addItem(_ item: Item) {
        items.append(item)
    }
}

// 2. 在应用入口创建并注入
@main
struct App: App {
    @StateObject var store = DataStore()  // 创建数据源
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(store)  // 注入环境
        }
    }
}

// 3. 在视图中使用
struct ContentView: View {
    @EnvironmentObject var store: DataStore  // 获取全局数据
    
    var body: some View {
        NavigationStack {
            List(store.items) { item in
                NavigationLink(value: item) {
                    ItemRow(item: item)
                }
            }
            .navigationDestination(for: Item.self) { item in
                DetailView(item: item)  // 传递单个对象
            }
        }
    }
}

七、选择指南

场景 推荐方案
视图内部临时状态 @State
父子组件共享数据 @Binding
创建视图模型 @StateObject
观察外部对象 @ObservedObject
跨多层级共享对象 @EnvironmentObject
读取系统配置 @Environment
自定义全局配置 @EnvironmentValues

八、总结

状态管理和环境变量是 SwiftUI 中相辅相成的两个核心概念：

  1. 状态管理像是"数据的所有者和管理者"，负责数据的创建、修改和响应式更新
  2. 环境变量像是"数据的传递通道"，负责在视图树中自上而下传递配置信息
  3. 两者经常配合使用：用状态管理维护数据，用环境变量传递到需要的地方
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容