SwiftUI 管理和监听状态变化

在SwiftUI中，@State属性包装器用于声明一个状态变量，并使视图在该状态改变时自动更新。@State是SwiftUI管理和存储视图状态的基本工具之一。

@State的主要功能和特点：

1. 状态管理：

   • @State用于在视图内部声明一个可变的状态变量。它的值是可变的，但视图的其他部分不会直接访问这个变量。
   • 当@State变量的值发生变化时，SwiftUI会自动重新渲染依赖该状态的视图。

2. 自动视图更新：

   • 使用@State声明的变量是视图状态的一部分。当它们的值改变时，SwiftUI会检测到变化并自动重新计算视图的主体内容。

3. 仅在视图内使用：

   • @State变量应当仅在视图的结构体内部使用。为了传递状态给子视图，应该使用@Binding。

使用示例

以下是一个简单的示例，展示如何在SwiftUI视图中使用@State：

import SwiftUI

struct ContentView: View {
    // 声明一个 @State 变量
    @State private var isToggled: Bool = false

    var body: some View {
        VStack {
            // 使用 @State 变量更新视图
            Text(isToggled ? "ON" : "OFF")
                .padding()
                .background(isToggled ? Color.green : Color.red)
                .foregroundColor(.white)
                .cornerRadius(10)
            
            // 通过按钮改变 @State 变量的值
            Button(action: {
                // 切换 isToggled 的值
                isToggled.toggle()
            }) {
                Text("Toggle")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

代码解释

1. @State声明：

   • @State private var isToggled: Bool = false：声明了一个私有的布尔类型状态变量isToggled，初始值为false。

2. 状态驱动的视图更新：

   • Text(isToggled ? "ON" : "OFF")：根据isToggled的值显示不同的文本。
   • background(isToggled ? Color.green : Color.red)：根据isToggled的值显示不同的背景颜色。

3. 改变状态：

   • Button(action: { isToggled.toggle() })：点击按钮时切换isToggled的值（从true变为false或反之），并自动触发视图更新。

除了@State，SwiftUI还提供了其他几种属性包装器来管理和监听状态变化，每种属性包装器都有其特定的用途。

1. @Binding

@Binding用于将父视图的状态传递给子视图，使子视图能够读取和修改该状态。

示例：

import SwiftUI

struct ParentView: View {
    @State private var isToggled: Bool = false

    var body: some View {
        VStack {
            Text(isToggled ? "ON" : "OFF")
            ToggleView(isToggled: $isToggled) // 传递绑定状态
        }
    }
}

struct ToggleView: View {
    @Binding var isToggled: Bool

    var body: some View {
        Button(action: {
            isToggled.toggle()
        }) {
            Text("Toggle")
        }
    }
}

2. @ObservedObject

@ObservedObject用于观察符合ObservableObject协议的对象，该对象的变化会触发视图更新。

示例：

import SwiftUI
import Combine

class ViewModel: ObservableObject {
    @Published var isToggled: Bool = false
}

struct ContentView: View {
    @ObservedObject var viewModel = ViewModel()

    var body: some View {
        VStack {
            Text(viewModel.isToggled ? "ON" : "OFF")
            Button(action: {
                viewModel.isToggled.toggle()
            }) {
                Text("Toggle")
            }
        }
    }
}

3. @StateObject

@StateObject用于声明和初始化一个符合ObservableObject协议的对象。它用于视图的整个生命周期内保持对象的状态。

示例：

import SwiftUI
import Combine

class ViewModel: ObservableObject {
    @Published var isToggled: Bool = false
}

struct ContentView: View {
    @StateObject var viewModel = ViewModel()

    var body: some View {
        VStack {
            Text(viewModel.isToggled ? "ON" : "OFF")
            Button(action: {
                viewModel.isToggled.toggle()
            }) {
                Text("Toggle")
            }
        }
    }
}

4. @EnvironmentObject

@EnvironmentObject用于在视图层次结构中共享一个符合ObservableObject协议的对象，通常用于在多个视图之间共享状态。

示例：

import SwiftUI
import Combine

class ViewModel: ObservableObject {
    @Published var isToggled: Bool = false
}

struct ParentView: View {
    @StateObject var viewModel = ViewModel()

    var body: some View {
        VStack {
            Text(viewModel.isToggled ? "ON" : "OFF")
            ChildView()
                .environmentObject(viewModel)
        }
    }
}

struct ChildView: View {
    @EnvironmentObject var viewModel: ViewModel

    var body: some View {
        Button(action: {
            viewModel.isToggled.toggle()
        }) {
            Text("Toggle")
        }
    }
}

5. @Environment

@Environment用于访问环境中的值，如当前的颜色方案、样式、布局方向等。

示例：

import SwiftUI

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Current color scheme: \(colorScheme == .dark ? "Dark" : "Light")")
    }
}

总结

SwiftUI提供了多种属性包装器来管理和监听状态变化，每种属性包装器都有其特定的用途和适用场景。理解和正确使用这些属性包装器是构建动态和响应式SwiftUI应用的关键。