SwiftUI之id(_)如何标识View

2020-06-27 本文已影响0人老马的春天

本篇文章讲解的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。但实际并不是这么回事。我们先看一个例子：

Kapture 2020-06-27 at 10.40.07.gif

这个一个非常简单的例子，当点击重置按钮后，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

但是，如果，状态很多呢？类似下边这种情况：

企业微信截图_a5c93d73-b513-4677-be97-6bfe88d41049.png

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
            }
        }
        ...
    }
}

上边的代码中的...是我省略掉了部分代码，我们只关注核心部分。代码看上去特别简单，但当我们运行后，发现：

Kapture 2020-06-27 at 11.04.46.gif

点击并没有任何清空效果，我们修改下代码，把这些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
            }
        }
    }
}

Kapture 2020-06-27 at 11.09.08.gif

通过上边的实验，我们总结出以下几点：

宏观上，修改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)
        }
    }
}

运行后，效果图：

企业微信截图_c1565004-be14-4457-ac97-adeb202d1b9b.png

我们先假设，并不会创建新的view，而是每次都初始状态，我们自定义的MyCircle的初始状态都会生成一个随机的颜色，按照我们这个假设，每次刷新，应该只是不同颜色之间的变换，效果如下图所示：

Kapture 2020-06-27 at 11.21.40.gif

但实际上是这样的效果：

Kapture 2020-06-27 at 11.23.38.gif

之所以有这样的效果，跟这行代码有关：

.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()! })
    }
}

Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-27 at 11.33.00.png

当点击了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/，如有侵权，立即删除。

SwiftUI之id(_)如何标识View

什么是id()

重置状态

如何验证？

一个使用案例

总结

猜你喜欢

热点阅读