UI 流向、@State、@ Binding 的奥秘揭秘

2023-11-06 15:43:14

<#1: 深度剖析 UI 流向、@State、@ Binding#>

在 SwiftUI 中，掌握 UI 流向、@State和 @ Binding 的差别至关重大，它们是响应式 UI 开发的基石。

UI 流向 ：
UI 流向定义了数据如何从应用程序的模型层流向其界面。它确保数据双向流动，即模型中的数据可以被界面组件使用，而界面中的交互也可以反过来改变模型。

@State ：
@State 用于管理组件内部的状态，例如按钮的启用或禁用的切换。与 @State 关联的数据是私有的，仅在组件内部可用。

@ Binding ：
@ Binding 用于在组件和其父组件或应用程序的其他部分（例如，@EnvironmentObject） között建立双向数据绑订。与 @State 类似，@ Binding 的数据也是私有的，但它允许父组件或应用程序的其他部分监视和操纵该数据。

<#2: UI 流向、@State、@ Binding 的区别#>

下表概括了 UI 流向、@State和 @ Binding 的关键区别：

功能	UI 流向	`@State`	`@ Binding`
数据流向	双向	单向（组件内部）	双向（组件和父组件或应用程序的其他部分）
数据私有性	否	组件内部	仅在绑定的父组件或应用程序的其他部分中
响应式性	通过 `@ObservedObject` 间接响应	通过重新渲染组件直接响应	仅在父组件或应用程序的其他部分的值显式地被观察到的组件中响应

<#3: 巧用 `@State`和 `@ Binding` 优化 UI 流向#>

明智地使用 @State和 @ Binding 可以优化应用程序的 UI 流向，提高其响应性。

何时使用 @State ：

管理组件内部的私有数据，例如表单字段的状态。
响应组件内部触发的动作，例如按钮的按下。

何时使用 @ Binding ：

与父组件或应用程序的其他部分交换数据。
实现跨组件的数据绑订，例如在多个组件中协调对同一个模型对象的变更。

<#4: 响应式 UI 开发的最佳实战#>

遵循最佳实战，可以确保响应式 UI 开发的高效和可持续性：

采用单向数据流，避免循环数据绑订。
尽可能使用 @State 管理组件内部的状态。
仅在有充分需要时使用 @ Binding。
使用 @EnvironmentObject 与应用程序的其他部分交换数据。
避免在组件中显式地监听 @State和 @ Binding 的值。

<#5: 技术指南：使用 SwiftUI 的 `@State`和 `@ Binding`#>

使用 @State ：

用 @State 注释组件属性，例如：
```
@State private var count = 0
```

使用内置的 $ 运算符来访问和改变组件的状态：

Button(action: {
    $count.wrappedValue += 1
}) {
    Text("加 1")
}

使用 @ Binding ：

用 @ Binding 注释组件属性，例如：

@StateObject private var appData = AppData()
@State private var selectedItem: String = ""

@ViewBuilder
func contentView() -> some View {
    VStack {
        List {
            ForEach(appData.items) { item in
                Text(item.name)
                    .onTapGesture {
                        $selectedItem.wrappedValue = item.name
                    }
            }
        }
    }
}

使用 .bidning(to:) 修饰符将子组件与父组件中的绑定的属性关联起来：

NavigationView {
    contentVew()
}
.toolbar {
    EditButton()
        .bidning(to: $selectedItem, onDisable: {
            // 禁用按钮的逻辑
        })
    }
}