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

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

第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/,如有侵权,立即删除。

上一篇下一篇

猜你喜欢

热点阅读