SwiftUI - 数据
在为 Apple 平台开发响应式和交互式应用程序时，数据管理是一个非常重要且关键的部分。众所周知，SwiftUI 使用声明式方式，应用程序的 UI 将根据底层数据自动更新，因此无论何时数据由于某些外部事件或用户操作而发生变化，它都会直接影响界面的各个部分。
因此，数据及其流和状态的管理非常重要。该框架提供了各种工具，例如状态变量和绑定，以将数据连接到应用程序的 UI。这些工具管理数据的来源或数据中发生的任何变化。以下是 SwiftUI 中最常用的数据管理技术 −
@State 属性包装器
@Binding 属性包装器
@ObservedObject 属性包装器
@EnvironmentObject 属性包装器
SwiftUI 中的 @State 属性包装器
@State 属性包装器用于读取和写入由 SwiftUI 管理的值。它为我们存储在视图中的给定值类型保存单一来源。它可以通过使用 @State 属性为所有类型的视图创建状态变量，并且每个状态变量都用某个初始值初始化。
因此，当状态变量的值发生变化时，SwiftUI 将自动更新视图中依赖于状态变量值的那些部分。状态变量通常被声明为私有的，这可以防止它们在范围之外使用。
我们可以改变状态属性。如果我们将状态属性传递给子视图，SwiftUI 将在主容器视图中的值发生变化时更新子视图，而子视图不能修改该值。要修改该值，我们需要将其作为绑定传递。我们也可以在 State 中存储 Observable()。
语法
以下是语法 −
@State private var value : Double = 2.3
示例
以下 SwiftUI 程序创建并访问状态变量。在这里，状态管理计数变量的值，每当计数的值发生变化时，视图都会相应更新。
import SwiftUI
struct ContentView: View {
// State variable
@State private var count = 0
var body: some View {
VStack {
Text("Counter: \(count)").font(.largeTitle)
Button("Increment") {
count += 1
}
.frame(width: 100, height: 60)
.background(.blue)
.foregroundStyle(.white)
.font(.headline)
}
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的 @Binding 属性包装器
绑定属性包装器在子视图和父视图之间创建双向关系，以便子视图可以轻松读取和写入父视图数据，反之亦然。
在这里，我们可以根据需要随时更新绑定变量，而无需直接将数据存储在其中。要传递绑定属性包装器，我们需要在属性前使用 $。或者我们可以说，我们可以借助绑定属性包装器将状态属性传递给另一个视图。我们还可以使用 @Binding 属性包装器创建绑定属性。
语法
以下是语法−
@Binding var value : Bool
示例
以下 SwiftUI 程序创建绑定属性。在这里，我们将状态变量作为绑定传递并创建了一个绑定变量。
import SwiftUI
struct ContentView: View {
// state variable
@State private var count = 0
var body: some View {
VStack {
Text("Counter: \(count)").font(.largeTitle).border(.black, width: 4)
// Passing count as a binding
newView(count: $count)
}
}
}
struct newView: View {
// Binding variable
@Binding var count: Int
var body: some View {
Button("Increase Value") {
count += 1
}
.frame(width: 130, height: 50)
.background(.brown)
.foregroundStyle(.white)
.font(.headline)
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的 @StateObject 和 @ObservedObject 属性包装器
@ObservedObject 属性包装器用于包装可观察对象并观察它们，而 @StateObject 用于创建和管理可观察对象。这两个包装器都需要符合 ObservableObject 协议的对象。
因此，每当可观察对象的值发生修改时，SwiftUI 都会更新与该对象相关的所有视图。它不包含任何默认值或初始值，可以由子视图使用。这里允许子视图更新属性。
语法
以下是语法−
@StateObject private var model = ObservableObject() @ObservedObject private var model = ObservableObject()
示例
以下 SwiftUI 程序使用 @StateObject 和 @ObservedObject 属性来管理可观察对象。
import SwiftUI
// 创建可观察对象
class Counter: ObservableObject {
@Published var count = 0
}
struct ContentView: View {
@StateObject private var counter = Counter()
var body: some View {
// 将计数器传递给 newView
newView(myCounter: counter)
}
}
struct newView: View {
// Observing the model
@ObservedObject var myCounter: Counter
var body: some View {
VStack {
Text("Count: \(myCounter.count)")
.font(.largeTitle)
.bold()
.padding()
Button("Increment") {
myCounter.count += 1
}
.frame(width: 130, height: 50)
.background(.brown)
.foregroundStyle(.white)
.font(.headline)
}
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的 @EnvironmentObject 属性包装器
@EnvironmentObject 属性包装器用于在具有可观察对象的所有视图之间共享数据。它共享数据而无需在视图层次结构中明确传递数据。数据在层次结构中的所有视图的公共环境中共享，如果任何视图更新数据，则它将自动更新所有视图。
共享对象必须符合 ObservableObject 协议，并且其属性必须使用 @Published 定义。共享数据必须在视图层次结构的较高级别的 .environmentObject() 中注入，并且可以使用 @EnvironmentObject 由任何视图访问。
语法
以下是语法 −
@EnvironmentObject var mySettings: ObservableObject()
示例
以下 SwiftUI 程序使用 @EnvironmentObject 设置 dark 模式。
import SwiftUI
class Settings: ObservableObject {
@Published var darkMode: Bool = false
}
struct ContentView: View {
@StateObject private var newSettings = Settings()
var body: some View {
VStack {
Text("Original View")
.font(.largeTitle)
.padding()
// Toggle dark mode
ToggleView()
// Display dark mode
DisplayView()
}
// 在环境对象中传递 newSettings
.environmentObject(newSettings)
}
}
struct ToggleView: View {
// Accessing the Settings
@EnvironmentObject var mySettings: Settings
var body: some View {
// Binding darkMode to the toggle
Toggle("Dark Mode", isOn: $mySettings.darkMode)
.padding()
.frame(width: 200, height: 200)
.background(mySettings.darkMode ? .black : .white)
.foregroundStyle(mySettings.darkMode ? .white : .black)
}
}
struct DisplayView: View {
// Access the Settings
@EnvironmentObject var settings: Settings
var body: some View {
Text("Dark Mode is \(settings.darkMode ? "Activated" : "Deactivated")")
.font(.title)
.padding()
.foregroundStyle(settings.darkMode ? .white : .black)
.background(settings.darkMode ? .black : .white)
}
}
#Preview {
ContentView()
}
输出
