(翻译) SwiftUI -- 理解 Binding
1.png
本文原创作者：Martin Lasek
原文链接：https://medium.com/@martinlasek/swiftui-understanding-binding-8e20269a76bc
在这个教程中，我们将会深入了解关键词 @Binding -- 它是什么？为什么它有什么好处？怎么去使用它？哦，我们将会重复使用上次教程中的views。
2.gif
这次的教程是跟上一个教程连起来的 (翻译)SwiftUI -- 动态列表和 Identifiable，你可以先去看之前的教程再回来接着继续阅读，或者你不介意也可以跳过上一个教程，继续下去😊。
索引
- 创建一个显示/隐藏细节的开关（按钮）
- 理解
Binding
1. 创建一个显示/隐藏细节的开关（按钮）
如果你跳过了上一个教程，那么你可以从 动态列表 CodeBase 下载上个教程的代码下来，因为这个教程是基于之前的代码继续学习的。
让我们为 View 添加另外一个 @State 的 Bool 属性，把它命名为 showDetails:
import SwiftUI
struct Pokemon: Identifiable {
...
}
struct ContentView : View {
@State var pokemonList = [ ... ]
@State var showDetails = true
var body: some View {
NavigationView {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
.navigationBarTitle(Text("Pokemon"))
.navigationBarItems(
trailing: Button(
action: addPokemon,
label: { Text("Add") }
)
)
}
}
func addPokemon() {
...
}
}
为了节省文章的空间，我把部分代码省略成 ... 显示。
要不我们用这个 Bool 属性来显示和隐藏 Pokemon 的 type吧？什么？你早就知道我们接下来要做这个了？好吧，你真是个优秀的 GIF 图观察者...
好的，接下来我们给 Navigation 添加一个左边的按钮，这个按钮的文本会根据 showDetails的值来决定显示 “show” 还是 “hide”：
import SwiftUI
struct Pokemon: Identifiable {
...
}
struct ContentView : View {
@State var pokemonList = [ ... ]
@State var showDetails = true
var body: some View {
NavigationView {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
.navigationBarTitle(Text("Pokemon"))
.navigationBarItems(
leading: Button(
action: { self.showDetails.toggle() },
label: { Text(self.showDetails ? "Hide" : "Show") }
),
trailing: Button(
action: addPokemon,
label: { Text("Add") }
)
)
}
}
func addPokemon() {
...
}
}
你可以在Bool类型的属性使用 toggle()函数，它就会切换相反的状态（true/false）。然后我们用一个简单的 if-else语句来判断它是显示 “show” 还是 “hide”。你的视图现在应该有一个新的按钮，它看起来会是这样：
3.png
现在试试运行你的项目，你会看到按钮已经可以控制它自己显示“show” 还是 “hide”！
请记住，当被
@State修饰的属性值改变的时候，它所在的View就会重新渲染。
我们可以使用和上面实现Button文本切换类似的方法，来控制Pokemon的type的显示和隐藏：
import SwiftUI
struct Pokemon: Identifiable {
...
}
struct ContentView : View {
@State var pokemonList = [ ... ]
@State var showDetails = true
var body: some View {
NavigationView {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
if self.showDetails {
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
}
.navigationBarTitle(Text("Pokemon"))
.navigationBarItems(
leading: Button(
action: { self.showDetails.toggle() },
label: { Text(self.showDetails ? "Hide" : "Show") }
),
trailing: Button(
action: addPokemon,
label: { Text("Add") }
)
)
}
}
func addPokemon() {
...
}
}
当 view 重新渲染，showDetails 为 true 的时候，type 就会显示；相反的，如果showDetails 为 false 的时候，type 就会隐藏。
2. 理解 Binding
一般来说，把一个大的 view 拆分成小的组件都是有好处的。让我们开始这么做吧，重构我们的 Button，把 showDetails toggle的逻辑放到它自己的view里面。新建一个 ToggleTextButton 的 SwiftUI 文件：
4.png
新建完你应该会看到这样的模版：
5.png
我们可以把所有关于 Button 的代码像这样放在*ToggleTextButton文件里：
import SwiftUI
struct ToggleTextButton: View {
var body: some View {
Button(
action: { self.showDetails.toggle() },
label: { Text(self.showDetails ? "Hide" : "Show") }
)
}
}
#if DEBUG
struct ToggleTextButton_Previews : PreviewProvider {
static var previews: some View {
ToggleTextButton()
}
}
#endif
现在我们会注意到Xcode报了挺多错误，类似我们使用了文件里面没有的属性 showDetails。紧跟着我的思路，因为这是理解 Binding的开始。幸运的是，它十分简单！
在*ToggleTextButton文件中，我们重命名那个missing的属性：
import SwiftUI
struct ToggleTextButton: View {
var isOn: Bool
var body: some View {
Button(
action: { self.isOn.toggle() },
label: { Text(self.isOn ? "Hide" : "Show") }
)
}
}
#if DEBUG
struct ToggleTextButton_Previews : PreviewProvider {
static var previews: some View {
ToggleTextButton(isOn: true)
}
}
#endif
想你所看到的，我们也得去适配 ToggleTextButton_Previews。这完全没问题。这仅仅只是一个预览，所以我们可以放一个假数据给它。这不会影响我们的程序，事实上，这真的很酷！
这时，Xcode仍然会报错，因为我们正在试着在结构体（Structure）里面去修改它的属性。
如果你有读过 (翻译) SwiftUI - 理解 State，这句话应该听起来很耳熟。我们将会通过在isOn属性前面添加 @Binding 关键字来解决这个问题，并且在 ToggleTextButton_Previews中去做适配：
import SwiftUI
struct ToggleTextButton: View {
@Binding var isOn: Bool
var body: some View {
Button(
action: { self.isOn.toggle() },
label: { Text(self.isOn ? "Hide" : "Show") }
)
}
}
#if DEBUG
struct ToggleTextButton_Previews : PreviewProvider {
@State static var myCoolBool = true // Note: it must be static
static var previews: some View {
ToggleTextButton(isOn: $myCoolBool)
}
}
#endif
在开始解释 $ 符号有什么作用之前，让我们快速地在 ContentView 中使用我们的自定义 Button。在ContentView中：
import SwiftUI
struct Pokemon: Identifiable {
...
}
struct ContentView : View {
@State var pokemonList = [ ... ]
@State var showDetails = true
var body: some View {
NavigationView {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
if self.showDetails {
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
}
.navigationBarTitle(Text("Pokemon"))
.navigationBarItems(
leading: ToggleTextButton(isOn: $showDetails),
trailing: Button(
action: addPokemon,
label: { Text("Add") }
)
)
}
}
func addPokemon() {
...
}
}
如果你运行代码，你会看到所有的功能跟我们期待的是一样的。
好吧，我们现在这里有什么呢。我们有一个父视图ContentView，它里面有一个子视图 ToggleTextButton。父视图里面有一个用于刷新页面的 @State属性。目前感觉挺好的，我们都知道这些。
我们现在想要子视图ToggleTextButton能够改变我们父视图里面的@State属性。怎么样才能让子视图有权限去修改它父视图的属性呢？如果我们看看在子视图里面，在它里面我们是怎么改变它的属性的：
// ToggleTextButton.swift
struct ToggleTextButton: View {
@Binding var isOn: Bool
var body: some View {
Button(
action: { self.isOn.toggle() },
label: { Text(self.isOn ? "Hide" : "Show") }
)
}
}
为了给子视图的属性和它父视图的属性建立关联，我们必须做3件事情。在子视图的属性前面写关键词 @Binding, 父视图的属性前面得用 @State修饰，当把父视图的@State属性传到子视图的时候，在属性名前面加上$。这样我们就建立了关联。
无论什么时候我们在子视图里面改变该属性，父视图里面的属性也会被修改！你记得@State 怎么工作的对吗？它一旦修改，视图就会重新渲染。仔细地想想，这意味着父视图的 body 会被重新渲染，也就是说，这时候会重新创建一个新的子视图实例，并将 State变量的引用和新的值传递给它。
你的ContentView 应该看起来是这样：
6.png
请注意：
@State变量需要一个默认值，@Binding不需要。
你的ToggleTextButton 应该会是这样：
7.png
值得一提的：PreviewProvider 结构体有一个名为 previews 的 static 变量，其实就像 View 结构体里面的 body。这也意味着在 previews 闭包中，我们无法访问实例变量，这就是为什么我们必须声明 一个静态的@State 变量，以便能够模拟 PreviewProvider。就是这样的！
终于！这就是我们最终的列表，它能够控制显示隐藏 Pokemon 的类型。
8.gif
