Binding

@Binding 是 SwiftUI 中的一种属性包装器，它用于在不同视图之间传递数据的引用，允许子视图修改父视图的状态。通过 @Binding，子视图可以访问和修改父视图中的 @State 变量。简而言之，@Binding 实现了父子视图之间的数据双向绑定。

@Binding 的作用

在 SwiftUI 中，视图状态通常使用 @State 来声明。@State 是本地的状态变量，只能在声明它的视图中修改。如果你需要将这个状态传递给子视图，且希望子视图能够修改这个状态，就需要使用 @Binding。

关键点

1. 双向绑定：通过 @Binding，子视图可以修改父视图的状态。当子视图修改绑定的值时，父视图的状态也会更新。
2. 引用传递：@Binding 不会创建新的状态副本，而是传递一个引用，让父视图和子视图共享同一个状态。
3. 传递数据：@Binding 常常用于父视图向子视图传递数据，尤其是在模态视图、表单等场景中。

使用场景

假设我们有一个父视图和一个子视图，父视图需要将一个状态变量传递给子视图，同时希望子视图能够修改这个状态。

示例代码

1. 父视图 (ParentView)

struct ParentView: View {
    @State private var isToggled: Bool = false // 声明一个状态变量
    
    var body: some View {
        VStack {
            Text("Toggle is \(isToggled ? "ON" : "OFF")")
            
            // 将 isToggled 传递给子视图作为绑定
            ChildView(isToggled: $isToggled)
        }
    }
}

2. 子视图 (ChildView)

struct ChildView: View {
    @Binding var isToggled: Bool // 使用 @Binding 接收父视图传来的状态
    
    var body: some View {
        Toggle("Switch", isOn: $isToggled) // Toggle 控件绑定到 @Binding 状态
            .padding()
    }
}

解释

1. 父视图 (ParentView)：

• 父视图中声明了一个 @State 变量 isToggled，它用来控制切换按钮的状态。

• 父视图通过 $isToggled 将 @State 变量传递给子视图 ChildView，这时传递的是一个绑定（Binding）。

2. 子视图 (ChildView)：

• 子视图使用 @Binding 声明一个变量 isToggled，它与父视图的状态变量是双向绑定的。

• Toggle 控件的 isOn 属性绑定到了 @Binding 变量 isToggled，这使得切换按钮能够反映和修改父视图的状态。

当用户在子视图中的 Toggle 控件上操作时，isToggled 的值会更新，父视图中的 isToggled 也会自动更新。这就是双向绑定的效果。

使用 @Binding 的一些场景

1. 模态视图的展示与隐藏：

假设我们有一个父视图控制一个模态视图的展示，父视图可以通过 @State 管理模态视图的展示状态，并通过 @Binding 传递给子视图以控制模态视图的展示。

2. 表单输入：

当你有一个表单或输入框时，父视图管理输入数据的状态，通过 @Binding 将状态传递给子视图（例如文本框、选择框等），让子视图可以更新父视图的状态。

3. 列表中的选项：

在一个动态列表中，子视图需要修改父视图中的数据（例如列表项被选中或取消选中），通过 @Binding 可以实现数据的同步更新。

小结

• @Binding 是一种引用类型的属性包装器，用于在父视图和子视图之间共享数据，并支持双向绑定。

• 它可以让子视图修改父视图的状态，并且在数据变化时自动更新视图。

• 适用于需要共享数据的场景，例如表单输入、模态视图的显示状态等。

通过 @Binding，你可以轻松地在视图层级之间传递和同步数据，使得状态管理更加清晰和简洁。