30天学会Swift-23：SwiftUI-数据流与环境

学习目标

• 深入理解SwiftUI中的数据流管理，包括@State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject。
• 掌握如何使用ObservableObject和@Published创建可观察对象。
• 理解@Environment和@EnvironmentObject在跨视图传递数据中的作用。
• 学习如何选择合适的数据流管理方式。

学习内容

1. SwiftUI 数据流概览

SwiftUI 的核心是数据驱动 UI。当数据发生变化时，UI 会自动更新。为了实现这一目标，SwiftUI 提供了多种属性包装器（Property Wrappers）来管理不同类型的数据流。

2. 属性包装器 (Property Wrappers)

2.1 @State

• 用途：用于管理视图内部的简单值类型数据（如 Int, String, Bool）。当 @State 变量改变时，视图会重新渲染。
• 特点：数据所有权在当前视图，通常声明为 private。
• 示例：

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

2.2 @Binding

• 用途：在父视图和子视图之间建立双向绑定。子视图可以读取和修改父视图的 @State 或其他 @Binding 变量，而无需拥有数据所有权。
• 特点：不拥有数据，只是引用。通过 $ 符号创建绑定。
• 示例：

  struct ParentView: View {
      @State private var isOn = false
      
      var body: some View {
          VStack {
              Toggle(isOn: $isOn) {
                  Text("Parent Toggle: \(isOn ? "On" : "Off")")
              }
              ChildToggleView(toggleState: $isOn) // 传递绑定
          }
      }
  }
  
  struct ChildToggleView: View {
      @Binding var toggleState: Bool // 接收绑定
      
      var body: some View {
          Toggle(isOn: $toggleState) {
              Text("Child Toggle: \(toggleState ? "On" : "Off")")
          }
      }
  }
  

2.3 @ObservedObject 和 ObservableObject

• 用途：用于管理引用类型数据（通常是 class），当数据改变时需要通知 UI 更新。
• ObservableObject：一个协议，你的数据模型类需要遵循它。
• @Published：在 ObservableObject 内部，标记需要发布变化的属性。当 @Published 属性改变时，ObservableObject 会自动发送通知。
• @ObservedObject：在视图中使用，用于监听 ObservableObject 实例的变化。当 ObservableObject 发布变化时，使用它的视图会重新渲染。
• 特点：视图不拥有数据，数据由外部创建并传入。适用于数据生命周期与视图生命周期不完全一致的情况。
• 示例：

  class UserSettings: ObservableObject {
      @Published var username = "Guest"
      @Published var score = 0
  }
  
  struct UserProfileView: View {
      @ObservedObject var settings = UserSettings() // 视图监听这个对象
      
      var body: some View {
          VStack {
              Text("Username: \(settings.username)")
              Text("Score: \(settings.score)")
              Button("Change Username") {
                  settings.username = "John Doe"
              }
              Button("Increase Score") {
                  settings.score += 10
              }
          }
      }
  }
  

2.4 @StateObject

• 用途：与 @ObservedObject 类似，也用于管理引用类型数据。但 @StateObject 拥有数据的生命周期，它会在视图首次创建时初始化对象，并在视图生命周期内保持该对象。
• 特点：视图拥有数据。适用于数据模型与视图生命周期紧密绑定，且视图是数据模型唯一所有者的情况。
• 示例：

  struct UserProfileViewWithStateObject: View {
      @StateObject var settings = UserSettings() // 视图拥有这个对象
      
      var body: some View {
          VStack {
              Text("Username: \(settings.username)")
              Text("Score: \(settings.score)")
              Button("Change Username") {
                  settings.username = "Jane Doe"
              }
              Button("Increase Score") {
                  settings.score += 5
              }
          }
      }
  }
  

2.5 @EnvironmentObject

• 用途：用于在视图层级结构中传递共享数据，避免手动通过构造器层层传递数据（“钻孔”问题）。
• 特点：数据由祖先视图注入到环境中，子孙视图通过 @EnvironmentObject 从环境中获取。数据必须是 ObservableObject。
• 注入：使用 .environmentObject() 修饰符注入。
• 获取：使用 @EnvironmentObject 属性包装器获取。
• 示例：

  class AppData: ObservableObject {
      @Published var themeColor: Color = .blue
      @Published var isLoggedIn: Bool = false
  }
  
  struct ContentView: View {
      @StateObject var appData = AppData() // 在根视图创建并注入
      
      var body: some View {
          NavigationView {
              VStack {
                  Text("Welcome!")
                      .font(.largeTitle)
                      .foregroundColor(appData.themeColor)
                  
                  NavigationLink(destination: SettingsView())
                  {
                      Text("Go to Settings")
                  }
                  .padding()
              }
              .navigationTitle("Home")
          }
          .environmentObject(appData) // 注入到环境中
      }
  }
  
  struct SettingsView: View {
      @EnvironmentObject var appData: AppData // 从环境中获取
      
      var body: some View {
          VStack {
              Toggle(isOn: $appData.isLoggedIn) {
                  Text("Logged In")
              }
              ColorPicker("Theme Color", selection: $appData.themeColor)
          }
          .navigationTitle("Settings")
          .padding()
      }
  }
  

3. @Environment

• 用途：用于访问SwiftUI提供的预定义环境值，如colorScheme（深色/浅色模式）、locale（本地化设置）、isPresented（视图是否被呈现）等。
• 特点：只读，不能修改。
• 示例：

  struct EnvironmentExampleView: View {
      @Environment(\.colorScheme) var colorScheme // 获取颜色模式
      @Environment(\.isPresented) var isPresented // 获取视图是否被呈现
      
      var body: some View {
          VStack {
              Text("Current Color Scheme: \(colorScheme == .dark ? "Dark" : "Light")")
              Text("Is Presented: \(isPresented ? "Yes" : "No")")
          }
      }
  }
  

4. 数据流选择指南

• @State：视图私有、简单值类型数据。
• @Binding：父子视图间双向传递数据，子视图不拥有数据。
• @StateObject：视图拥有并管理引用类型数据，数据生命周期与视图绑定。
• @ObservedObject：视图监听外部传入的引用类型数据，视图不拥有数据。
• @EnvironmentObject：在视图层级结构中共享引用类型数据，避免层层传递。

实践练习

1. 使用@State和@Binding：
   • 创建一个LoginView，包含用户名和密码的TextField以及一个登录Button。
   • 使用@State管理用户名和密码。
   • 创建一个SecureField（密码输入框），并使用@Binding将其值与LoginView中的密码@State变量绑定。
2. 使用@StateObject和@ObservedObject：
   • 创建一个TaskStore类，遵循ObservableObject，包含一个@Published的tasks: [String]数组。
   • 在ContentView中使用@StateObject创建TaskStore实例。
   • 在ContentView中显示任务列表，并添加一个按钮来添加新任务。
   • 创建一个TaskDetailView，接收一个@ObservedObject的TaskStore实例，并显示任务数量。
3. 使用@EnvironmentObject：
   • 创建一个ThemeSettings类，遵循ObservableObject，包含一个@Published的accentColor: Color属性。
   • 在应用程序的根视图（例如[YourAppName]App.swift中的ContentView）注入ThemeSettings作为environmentObject。
   • 在应用程序的多个子视图中，通过@EnvironmentObject获取ThemeSettings，并使用accentColor来设置文本颜色或按钮颜色。

思考题

• @StateObject和@ObservedObject的主要区别是什么？在什么场景下应该优先选择哪个？
• @EnvironmentObject解决了什么问题？它和手动传递@ObservedObject有什么优缺点？
• 在设计SwiftUI应用程序的数据流时，你通常会遵循哪些原则？