Tailwind CSSTailwind CSS
Home
  • Tailwind CSS 书籍目录
  • Vue 3 开发实战指南
  • React 和 Next.js 学习
  • TypeScript
  • React开发框架书籍大纲
  • Shadcn学习大纲
  • Swift 编程语言:从入门到进阶
  • SwiftUI 学习指南
  • 函数式编程大纲
  • Swift 异步编程语言
  • Swift 协议化编程
  • SwiftUI MVVM 开发模式
  • SwiftUI 图表开发书籍
  • SwiftData
  • ArkTS编程语言:从入门到精通
  • 仓颉编程语言:从入门到精通
  • 鸿蒙手机客户端开发实战
  • WPF书籍
  • C#开发书籍
learn
  • Java编程语言
  • Kotlin 编程入门与实战
  • /python/outline.html
  • AI Agent
  • MCP (Model Context Protocol) 应用指南
  • 深度学习
  • 深度学习
  • 强化学习: 理论与实践
  • 扩散模型书籍
  • Agentic AI for Everyone
langchain
Home
  • Tailwind CSS 书籍目录
  • Vue 3 开发实战指南
  • React 和 Next.js 学习
  • TypeScript
  • React开发框架书籍大纲
  • Shadcn学习大纲
  • Swift 编程语言:从入门到进阶
  • SwiftUI 学习指南
  • 函数式编程大纲
  • Swift 异步编程语言
  • Swift 协议化编程
  • SwiftUI MVVM 开发模式
  • SwiftUI 图表开发书籍
  • SwiftData
  • ArkTS编程语言:从入门到精通
  • 仓颉编程语言:从入门到精通
  • 鸿蒙手机客户端开发实战
  • WPF书籍
  • C#开发书籍
learn
  • Java编程语言
  • Kotlin 编程入门与实战
  • /python/outline.html
  • AI Agent
  • MCP (Model Context Protocol) 应用指南
  • 深度学习
  • 深度学习
  • 强化学习: 理论与实践
  • 扩散模型书籍
  • Agentic AI for Everyone
langchain
  • @ObservedObject 和 @EnvironmentObject 的使用

@ObservedObject 和 @EnvironmentObject 的使用

在 SwiftUI 中,@ObservedObject 和 @EnvironmentObject 是两种用于管理和共享状态的属性包装器。它们适用于不同的场景,帮助实现视图之间的数据同步和响应式编程。

@ObservedObject

1. 什么是 @ObservedObject?

@ObservedObject 用于观察遵循 ObservableObject 协议的对象。当对象的状态发生变化时,使用 @ObservedObject 的视图会自动更新。

2. 如何使用 @ObservedObject

示例:计数器应用

首先,创建一个遵循 ObservableObject 协议的类,并在其中定义一个 @Published 属性。

import SwiftUI
import Combine

class Counter: ObservableObject {
    @Published var count = 0 // 当 count 变化时,视图会更新
}

struct CounterView: View {
    @ObservedObject var counter = Counter() // 使用 @ObservedObject 观察状态

    var body: some View {
        VStack {
            Text("Count: \(counter.count)")
                .font(.largeTitle)
            Button("Increment") {
                counter.count += 1 // 修改状态
            }
            .padding()
        }
    }
}

在这个示例中,Counter 类是一个观察对象,CounterView 通过 @ObservedObject 观察它。当 count 属性变化时,CounterView 会自动更新显示的文本。

3. 使用 @ObservedObject 的场景

  • 多个视图观察同一个对象:可以在多个视图中使用相同的 @ObservedObject 实例,以便它们可以响应同一状态的变化。
  • 自定义数据模型:在视图模型中使用 @ObservedObject 来管理复杂的状态和逻辑。

@EnvironmentObject

1. 什么是 @EnvironmentObject?

@EnvironmentObject 用于在视图层次结构中注入共享的状态对象。它允许将对象的实例从父视图传递给子视图,而不需要逐层传递绑定。

2. 如何使用 @EnvironmentObject

示例:用户设置

创建一个遵循 ObservableObject 协议的类,并在父视图中提供它。

import SwiftUI

class UserSettings: ObservableObject {
    @Published var username: String = "Guest"
}

struct ParentView: View {
    @StateObject var userSettings = UserSettings() // 创建状态对象

    var body: some View {
        VStack {
            Text("Welcome, \(userSettings.username)")
            ChildView() // 子视图使用 @EnvironmentObject
        }
        .environmentObject(userSettings) // 注入环境对象
    }
}

struct ChildView: View {
    @EnvironmentObject var userSettings: UserSettings // 使用 @EnvironmentObject

    var body: some View {
        VStack {
            TextField("Enter your name", text: $userSettings.username)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
        }
    }
}

在这个示例中,UserSettings 是一个共享的状态对象,ParentView 将其注入到视图环境中。ChildView 使用 @EnvironmentObject 来访问这个共享的状态。

3. 使用 @EnvironmentObject 的场景

  • 全局状态管理:适用于整个应用中需要共享的状态,例如用户设置、主题等。
  • 避免逐层传递:当有多个嵌套视图时,使用 @EnvironmentObject 可以避免在每个视图中逐层传递对象。

总结

  • @ObservedObject:用于在特定视图中观察和响应 ObservableObject 实例的状态变化,适合较为局部的状态管理。
  • @EnvironmentObject:用于在视图层次中共享状态对象,适合全局状态管理和简化数据传递。

根据应用的需求选择使用 @ObservedObject 或 @EnvironmentObject,可以有效提高代码的组织性和可维护性。

Last Updated:: 11/3/24, 9:18 PM