Bindable 与 Observable

Bindable#

在 SwiftUI 中，@Bindable 是一个属性包装器（Property Wrapper），用于创建可绑定的状态。它通常与 @Observable 结合使用，允许你将模型数据与视图绑定，从而实现数据的双向绑定。

什么是 `@Bindable`？#

@Bindable 是 SwiftUI 提供的一个属性包装器，用于将 Observable 对象中的属性绑定到视图控件（如 TextField、Toggle 等）。通过 @Bindable，你可以轻松实现视图与数据模型之间的双向绑定。

使用场景#

当你有一个 Observable 对象，并且希望将其属性绑定到视图控件时。
当你需要在子视图中修改父视图传递的 Observable 对象时。

基本用法#

1. 定义 `Observable` 模型#

首先，你需要定义一个符合 Observable 协议的模型类。Observable 是 SwiftUI 提供的一个协议，用于标记可观察的对象。

import SwiftUI
import Observation

@Observable
class User {
    var name: String = ""
    var isSubscribed: Bool = false
}

2. 在视图中使用 `@Bindable`#

在视图中，你可以使用 @Bindable 将 Observable 对象的属性绑定到视图控件。

struct ContentView: View {
    @State private var user = User()

    var body: some View {
	    @Bindable var user = user
        VStack {
            TextField("Enter your name", text: $user.name)
                .textFieldStyle(.roundedBorder)
                .padding()

            Toggle("Subscribe", isOn: $user.isSubscribed)
                .padding()

            Text("Hello, \(user.name)!")
            Text(user.isSubscribed ? "Subscribed" : "Not Subscribed")
        }
        .padding()
    }
}

在这个例子中：

@State 用于创建并管理 User 对象。
@Bindable 隐式地用于 $user.name 和 $user.isSubscribed，将 User 对象的属性绑定到 TextField 和 Toggle。

在子视图中使用 `@Bindable`#

如果你需要将 Observable 对象传递给子视图，并在子视图中修改它的属性，可以使用 @Bindable。

示例代码#

struct ContentView: View {
    @State private var user = User()

    var body: some View {
        VStack {
            Text("Parent View")
            TextField("Enter your name", text: $user.name)
                .textFieldStyle(.roundedBorder)
                .padding()

            SubView(user: user)
        }
        .padding()
    }
}

struct SubView: View {
    @Bindable var user: User

    var body: some View {
        VStack {
            Text("Sub View")
            Toggle("Subscribe", isOn: $user.isSubscribed)
                .padding()

            Text("Hello, \(user.name)!")
            Text(user.isSubscribed ? "Subscribed" : "Not Subscribed")
        }
        .padding()
    }
}

在这个例子中：

ContentView 将 User 对象传递给 SubView。
SubView 使用 @Bindable 来绑定 User 对象的属性，并可以在子视图中修改这些属性。

`@Bindable` 的工作原理#

@Bindable 会创建一个对 Observable 对象的绑定引用。
当 Observable 对象的属性发生变化时，视图会自动更新。
当视图控件（如 TextField 或 Toggle）修改绑定的属性时，Observable 对象的值也会同步更新。

与 `@State` 和 `@Binding` 的区别#

特性	`@State`	`@Binding`	`@Bindable`
作用对象	视图的私有状态	父视图传递的状态绑定	`Observable` 对象的绑定
使用场景	管理视图内部的状态	在子视图中修改父视图的状态	绑定 `Observable` 对象的属性
是否可写	是	是	是
是否支持复杂对象	是（但需要手动实现 `Observable`）	是（但需要手动实现 `Observable`）	是（直接支持 `Observable` 对象）

总结#

@Bindable 是 SwiftUI 中用于绑定 Observable 对象属性的工具。
它通常与 Observable 协议一起使用，实现视图与数据模型之间的双向绑定。
你可以在父视图中使用 @State 创建 Observable 对象，并通过 @Bindable 将其传递给子视图。
@Bindable 使得在 SwiftUI 中处理复杂数据绑定变得更加简单和直观。

通过 @Bindable，你可以更轻松地实现视图与数据模型之间的双向绑定，从而构建出更动态和响应式的用户界面。

在 SwiftUI 中，Bindable 和 Binding 都与数据的双向绑定（data binding）相关，但它们用于不同的场景和目的。让我们详细地探讨一下它们的差异和使用场景。

Bindable 与 Observable

Bindable#

什么是 @Bindable？#

使用场景#

基本用法#

1. 定义 Observable 模型#

2. 在视图中使用 @Bindable#

在子视图中使用 @Bindable#