SwiftUI 中 @State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject 的区别和用法？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

@State

@State 是 SwiftUI 中最基本的状态管理工具。它用于管理视图内部的状态，通常用于简单的局部状态管理。例如：

struct ContentView: View {
    @State private var isOn: Bool = false

    var body: some View {
        Toggle("Toggle", isOn: $isOn)
    }
}

在这个例子中，isOn 是一个 @State 属性，当用户切换 Toggle 时，isOn 的值会发生变化，视图会自动重新渲染。

@Binding

@Binding 用于在父子视图之间共享状态。它允许子视图修改父视图的状态。例如：

// www.javascriptcn.com code example
struct ParentView: View {
    @State private var isOn: Bool = false

    var body: some View {
        ChildView(isOn: $isOn)
    }
}

struct ChildView: View {
    @Binding var isOn: Bool

    var body: some View {
        Toggle("Toggle", isOn: $isOn)
    }
}

在这个例子中，ChildView 通过 @Binding 修饰的 isOn 属性与 ParentView 共享状态。

@ObservedObject

@ObservedObject 用于管理外部对象的状态。这个对象必须遵循 ObservableObject 协议，并且使用 @Published 属性来标记需要观察的属性。例如：

// www.javascriptcn.com code example
class UserSettings: ObservableObject {
    @Published var isOn: Bool = false
}

struct ContentView: View {
    @ObservedObject var settings = UserSettings()

    var body: some View {
        Toggle("Toggle", isOn: $settings.isOn)
    }
}

在这个例子中，UserSettings 是一个遵循 ObservableObject 的类，ContentView 通过 @ObservedObject 修饰的 settings 属性来观察 UserSettings 的状态变化。

@StateObject

@StateObject 类似于 @ObservedObject，但它负责创建和管理对象的生命周期。@StateObject 修饰的对象在视图的生命周期内保持不变，即使视图重新渲染，对象也不会被重新创建。例如：

// www.javascriptcn.com code example
class UserSettings: ObservableObject {
    @Published var isOn: Bool = false
}

struct ContentView: View {
    @StateObject var settings = UserSettings()

    var body: some View {
        Toggle("Toggle", isOn: $settings.isOn)
    }
}

在这个例子中，settings 是一个 @StateObject，它在 ContentView 的生命周期内保持不变。

@EnvironmentObject

@EnvironmentObject 用于在整个视图层次结构中共享数据。它允许任何子视图访问和修改该对象。例如：

// www.javascriptcn.com code example
class UserSettings: ObservableObject {
    @Published var isOn: Bool = false
}

struct ParentView: View {
    @StateObject var settings = UserSettings()

    var body: some View {
        ChildView()
            .environmentObject(settings)
    }
}

struct ChildView: View {
    @EnvironmentObject var settings: UserSettings

    var body: some View {
        Toggle("Toggle", isOn: $settings.isOn)
    }
}

在这个例子中，ParentView 通过 .environmentObject(settings) 将 UserSettings 对象传递到环境中，ChildView 通过 @EnvironmentObject 修饰的 settings 属性来访问和修改该对象。

SwiftUI 中 @State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject 的区别和用法？

推荐答案