Data — Binding

在 SwiftUI 中，Binding 是用来创建双向数据绑定的核心机制，允许一个视图能够读写绑定数据。这种双向绑定使得视图和数据模型（@State、@EnvironmentObject 等）能够保持同步。

但是，有些场景中直接使用 @Binding 或内置的绑定逻辑可能无法满足所有需求，这时就需要自定义 Binding。自定义 Binding 是 SwiftUI 提供的一种灵活机制，允许开发者控制绑定数据的行为、更改逻辑处理或提供派生值。

为什么需要自定义 Binding？ #

以下是一些典型场景，你可能需要自定义 Binding：

1. 在只读值上添加额外的行为（衍生值） #

有时，你需要将一个值与绑定逻辑分开，例如从一个核心数据派生出另一个值，但仍希望用户在视图中操作时更新衍生值（或者可以动态计算显示用的数据）。

示例： #

  • 控制一个元素的可见性，而逻辑实际来自其他布尔值（例如 isVisible = !isHidden）。
  • 从母数据派生新的绑定值（如子拆分字段）。

2. 设置值需经过验证或加工 #

当数据修改时，你可能希望对绑定数据进行一些额外处理（例如，校验输入值、限制范围或合法化用户输入）。

示例： #

  • 限制输入的数值范围（如希望用户只能输入 0 到 100）。
  • 强制格式化用户的输入（例如保留两位小数）。

3. 操作更复杂的视图数据结构 #

例如，你的 Binding 需要操作更深层次的某个数据嵌套，或者需要将某个字段映射到更复杂的数据模型。

示例： #

  • 绑定一个结构中的某个属性（如结构体内的单个属性）。
  • 需要对嵌套 JSON 数据结构绑定到某个子视图。

如何自定义 Binding？ #

SwiftUI 提供了一种非常简洁的方式创建自定义的 Binding，可以通过 Binding 的静态方法 Binding(get:set:) 来实现：

基本创建方式 #

Binding<Value>(get: @escaping () -> Value, set: @escaping (Value) -> Void)
  • get： 用于从模型中读取值（获取显示值）。
  • set： 用于将视图中的修改写入模型。

示例场景 #

1. 最简单的自定义 Binding #

一个简单的示例，基于 @State 的布尔值 isHidden，我们创建一个 isVisible 的双向绑定属性：

struct CustomBindingExample: View {
    @State private var isHidden = false // 状态值

    var body: some View {
        Toggle("Visible", isOn: Binding(
            get: { !isHidden },       // 通过反操作派生 isVisible
            set: { isHidden = !$0 }  // 对反操作同步 isHidden
        ))
        .padding()
    }
}

解释： #

  1. 绑定逻辑：
    • get: 返回反向布尔值 !isHidden，表示是否可见。
    • set: 将视图的修改（true/false）转换为 isHidden。
  2. 结果：
    • Toggle 会显示 “Visible” 状态的开关，点击后自动更新绑定值。

2. 限制输入值范围 #

有时，你希望限制用户输入的范围（如 0 到 100）。

struct RangeBindingExample: View {
    @State private var age = 18 // 默认值

    var body: some View {
        VStack {
            Slider(value: Binding(
                get: { Double(age) }, // 显示当前 age
                set: { age = Int(min(max($0, 0), 100)) } // 限制 age 在 0-100
            ), in: 0...100)

            Text("Age: \(age)")
        }
        .padding()
    }
}

解释： #

  • 绑定逻辑：
    • 显示部分通过 get 将 age 转换为 Double。
    • 在 set 中限制 age 的范围为 0 到 100。
  • 滑块行为：
    • 用户拖动滑块时，即使拖动越界，age 值始终限制在有效范围内。

3. 绑定结构体中的某个属性 #

在 Swift 中，结构体是值类型，因此直接传递结构体会复制整个值。如果我们只想更改结构体中的某个属性，可以使用自定义绑定。

struct Person {
    var name: String
    var age: Int
}

struct NestedBindingExample: View {
    @State private var person = Person(name: "Alice", age: 25)

    var body: some View {
        VStack {
            TextField("Name", text: Binding(
                get: { person.name },
                set: { person.name = $0 }
            ))
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()

            Stepper("Age: \(person.age)", value: Binding(
                get: { person.age },
                set: { person.age = $0 }
            ))
        }
        .padding()
    }
}

解释： #

  1. 绑定逻辑：
    • TextField 和 Stepper 都绑定到 person 结构中对应的属性值。
  2. 结果：
    • 姓名输入框推动的是 person.name，而年龄步进器推动的是 person.age。

4. 动态显示派生值 #

自定义 Binding 允许创建基于某个核心值的衍生绑定。例如，你可能希望显示一个总额的格式化值，但又能让用户直接改变原始值。

struct DerivedValueBinding: View {
    @State private var totalAmount: Double = 0.0

    var body: some View {
        VStack {
            TextField("Enter Amount", value: Binding(
                get: { totalAmount },
                set: { totalAmount = $0 }
            ), format: .currency(code: "USD"))
            .textFieldStyle(RoundedBorderTextFieldStyle())
            
            Slider(value: Binding(
                get: { totalAmount },
                set: { totalAmount = $0 }
            ), in: 0...1000)
        }
        .padding()
    }
}

解释： #

  • TextField 使用 Binding 双向绑定，并动态转换为货币格式（USD）。
  • 同一个值通过滑块（Slider）调整。

5. 在控件中抽象出复用的 Binding #

可以将自定义的 Binding 封装到拓展函数中，以便在多个位置或视图中复用。

extension Binding {
    static func limited(to range: ClosedRange<Value>) -> Binding<Value> where Value: Comparable {
        Binding(
            get: { self.defaultValue },
            set: { self.defaultValue = min(max($0, range.lowerBound), range.upperBound) }
        )
    }
}

// 使用自定义 Binding
struct LimitedBindingView: View {
    @State private var percentage: Double = 50.0

    var body: some View {
        Slider(value: .limited(to: 0...100), in: 0...100)
            .padding()
    }
}

总结 #

什么时候需要自定义 Binding？ #

  • 当你需要对数据加工、验证、合法化。
  • 当值需要从核心状态派生。
  • 当操作更复杂的数据结构，或交换数据的层级。

如何编写自定义 Binding？ #

  1. 使用 Binding(get:set:)。
  2. 在 get: 中定义如何从核心数据中派生值。
  3. 在 set: 中定义如何将视图更改的数据写入核心状态。

常见用途： #

  • 派生值处理
  • 限制输入范围或数据校验
  • 操作复杂嵌套数据结构
  • 自定义跨组件的共享逻辑
本文共 1743 字，上次修改于 Jan 22, 2025