本篇文章讲解的id(),大家可能并没有使用过，但了解这个技术，在特定的场景下，会帮助我们解决一些重要的问题。
可在此处下载本篇文章所用代码https://gist.github.com/agelessman/1cef9b682995329b5fa7b21df389c8ac
什么是id()
struct Example1: View {
@State private var text = ""
@State private var textFieldId = 0
var body: some View {
VStack {
TextField("请输入邮箱", text: $text)
.id(textFieldId)
}
.padding(.horizontal, 20)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
我们看一下id()的定义：
extension View {
/// Returns a view whose identity is explicitly bound to the proxy
/// value `id`. When `id` changes the identity of the view (for
/// example, its state) is reset.
@inlinable public func id<ID>(_ id: ID) -> some View where ID : Hashable
}
可以看出来，当我们使用id()为某个view绑定了一个唯一的标识后，当该标识的值改变后，表面上看，该view就会回到初始状态，实际上，当标识改变后，系统创建了一个新的view。
重置状态
按照正常逻辑，当我们标识了某个view后，我们可以随意控制该view，比如把view移动到不同的容器中，像变量一样的使用view。但实际并不是这么回事。我们先看一个例子：
这个一个非常简单的例子，当点击重置按钮后，TextField重置状态，按照正常逻辑，我们的代码应该是这样的：
struct Example1: View {
@State private var text = ""
@State private var textFieldId = 0
var body: some View {
VStack {
TextField("请输入邮箱", text: $text)
.id(textFieldId)
Button("重置") {
self.text = ""
}
}
.padding(.horizontal, 20)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
我们使用self.text = ""清空了输入框中的内容，在这个例子中，我们Example1中的状态并不多，只有两个：
@State private var text = ""
@State private var textFieldId = 0
但是，如果，状态很多呢？类似下边这种情况：
struct Example1: View {
@State private var text0 = ""
@State private var text1 = ""
@State private var text2 = ""
@State private var text3 = ""
@State private var text4 = ""
@State private var text5 = ""
@State private var text6 = ""
@State private var textFieldId = 0
var body: some View {
VStack {
VStack {
TextField("text0", text: $text0)
TextField("text1", text: $text1)
TextField("text2", text: $text2)
TextField("text3", text: $text3)
TextField("text4", text: $text4)
TextField("text5", text: $text5)
TextField("text6", text: $text6)
}
Button("重置") {
self.text0 = ""
self.text1 = ""
self.text2 = ""
self.text3 = ""
self.text4 = ""
self.text5 = ""
}
}
.padding(.horizontal, 20)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
我们在清空的时候,就会写很多重复的代码，如果我们给TextField外层的VStack绑定一个标识，重置这个操作就非常简单。
struct Example1: View {
@State private var text0 = ""
...
@State private var textFieldId = 0
var body: some View {
VStack {
VStack {
TextField("text0", text: $text0)
...
TextField("text6", text: $text6)
}
.id(textFieldId)
Button("重置") {
self.textFieldId += 1
}
}
...
}
}
上边的代码中的...是我省略掉了部分代码，我们只关注核心部分。代码看上去特别简单，但当我们运行后，发现：
点击并没有任何清空效果，我们修改下代码，把这些TextField放到一个独立的View中：
struct MyCustom: View {
@State private var text0 = ""
@State private var text1 = ""
@State private var text2 = ""
@State private var text3 = ""
@State private var text4 = ""
@State private var text5 = ""
@State private var text6 = ""
var body: some View {
VStack {
TextField("text0", text: $text0)
TextField("text1", text: $text1)
TextField("text2", text: $text2)
TextField("text3", text: $text3)
TextField("text4", text: $text4)
TextField("text5", text: $text5)
TextField("text6", text: $text6)
}
.padding(.horizontal, 20)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
struct Example2: View {
@State private var textFieldId = 0
var body: some View {
VStack {
MyCustom()
.id(textFieldId)
Button("重置") {
self.textFieldId += 1
}
}
}
}
通过上边的实验，我们总结出以下几点：
- 宏观上，修改id()，可以把该view重置到初始状态
- 所谓的重置到初始状态，本质上是重新创建了一个新的view
- 需要重置的view必须是一个独立封装的view
第3点很重要，如果我们想通过这种方式来重置view，我们就需要把该view封装成独立的view。
如何验证？
可能会有同学认为并没有创建一个新的view，而是把当前的view的状态恢复到了初始状态？这个疑问非常的合情合理，我们用一个例子来验证一下：
大家先看下边的代码：
struct Example3: View {
@State private var theId = 0
var body: some View {
VStack(spacing: 20) {
MyCircle()
.transition(AnyTransition.opacity.combined(with: .slide))
.id(theId)
.onDisappear {
print("消失了")
}
Text("id = \(theId) ")
Button("Increment Id") {
withAnimation(.easeIn(duration: 2.0)) {
self.theId += 1
}
}
}
}
struct MyCircle: View {
private let color: Color = [.red, .green, .blue, .purple, .orange, .pink, .yellow].randomElement()!
var body: some View {
return Circle()
.foregroundColor(color)
.frame(width: 180, height: 180)
}
}
}
运行后，效果图：
我们先假设，并不会创建新的view，而是每次都初始状态，我们自定义的MyCircle的初始状态都会生成一个随机的颜色，按照我们这个假设，每次刷新，应该只是不同颜色之间的变换，效果如下图所示：
但实际上是这样的效果：
之所以有这样的效果，跟这行代码有关：
.transition(AnyTransition.opacity.combined(with: .slide))
如果不知道transition的同学，可以去看我的这篇文章https://zhuanlan.zhihu.com/p/146333076。
再看打印结果：
消失了
消失了
...
消失了
综上所述，修改了标识变量后，确实重新创建了一个新的view。
一个使用案例
从思想上来说，我们使用该技术的目的是重置自定义view的状态。在本小节中，我们演示另外一种用处：可以提升List View的性能。
在SwiftUI中，每次刷新List View时，系统都会计算刷新前和刷新后的变化，以便进行一些类似于动画这样的操作。但是，当List中的数据非常多的时候，系统计算这些变化就会非常耗时，我们先看下边的代码：
struct Example4: View {
@State private var array = (0..<500).map { _ in String.random() }
var body: some View {
VStack {
List(array, id: \.self) { item in
Text("\(item)")
}
Button("Shuffle") {
self.array.shuffle()
}
}
}
}
extension String {
static func random(length: Int = 20) -> String {
String((0..<length).map { _ in "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890".randomElement()! })
}
}
当点击了Shuffle按钮后，需要等5秒左右的时间才能刷新，我们只需要简单的修改代码，给List绑定一个值就可以了，注意，这里的List相当于一个独立的view。
struct Example5: View {
@State private var theId = 0
@State private var array = (0..<500).map { _ in String.random() }
var body: some View {
VStack {
List(array, id: \.self) { item in
Text("\(item)")
}.id(theId)
Button("Shuffle") {
self.array.shuffle()
self.theId += 1
}
}
}
}
但在SwiftUI中，因为新建了一个view，因此List会滚动到最上边，这又是一个新的问题。
总结
使用id()的一个核心思想是，当我们修改了绑定值后，会立马新建一个相同的view，以至于表面看上去，该view像回到了初始状态，在我们平时开发中，当遇到此场景时，可以考虑使用该技术。
注：上边的内容参考了网站https://swiftui-lab.com/swiftui-id/，如有侵权，立即删除。
