在SwiftUI中切换视图的最佳方法是什么?

时间:2019-12-17 15:41:28

标签: swift performance swiftui

我尝试了几种在SwiftUI中切换视图的选项。但是,每次切换多次时,每个人都会遇到类似lagging over time的问题。链接的问题已删除,我不知道为什么,但是如果不是,它确实可以帮助我。我之所以这样问是因为这个问题引起了我的兴趣,我想知道更多,因为我能够在该问题中复制所描述的行为。我试图找到最好和最干净的方法来使用SwiftUI切换视图。我只是想制作一个多视图用户界面。

在View1.swift中

import SwiftUI
struct View1: View {
    @State var GoToView2:Bool = false
    var body: some View {
        ZStack {
            if (GoToView2) {
                View2()
                //What should I do if I created another swiftui view under the name View2? 
                //Just calling View2() like that causes lag as described in the linked question before it was deleted, if from view2 I switch back to view1 and so on. 
                //If I directly put the code of View2 here, then adding other views would get too messy.
            } else {
                VStack {
                    Button(action: {self.GoToView2.toggle()}) {
                        Text("Go to view 2")
                    }
                }
            }
        }
    }
}

在View2.swift中:

import SwiftUI
struct View2: View {
    @State var GoToView1:Bool = false
    var body: some View {
        ZStack {
            if (GoToView1) {
                 View1()
            } else {
                VStack {
                    Button(action: {self.GoToView1.toggle()}) {
                        Text("Go to view 1")
                    }
                }
            }
        }
    }
}

我希望你们能理解这个问题。要复制此行为,请在swiftUI应用中编译代码,然后快速在两个按钮之间反复切换30秒,然后您会注意到每次切换之间存在延迟,并且调整窗口的大小应显得粗大。我正在使用最新版本的macOS和最新版本的Xcode。

1 个答案:

答案 0 :(得分:2)

因此,我试图证明对Views的每次调用都会向视图堆栈中添加一个实例...在这里我可能是错的,但以下内容应表明这一点:

struct View1: View {
    @State var GoToView2:Bool = false
    var counter: Int

    init(counter: Int) {
        self.counter = counter + 1
    }

    var body: some View {
        VStack {
            if (GoToView2) {
                Text("\(self.counter)")
                View2(counter: self.counter)
            } else {
                VStack {
                    Button(action: {
                        withAnimation {
                            self.GoToView2.toggle()
                        }
                    }) {
                        Text("Go to view 2")
                    }
                }
            }
        }
    }
}

struct View2: View {
    @State var GoToView1:Bool = false
    var counter: Int

    init(counter: Int) {
        self.counter = counter + 1
    }

    var body: some View {
        VStack {
            if (GoToView1) {
                Text("\(self.counter)")
                View1(counter: self.counter)
            } else {
                VStack {
                    Button(action: {
                        withAnimation {
                            self.GoToView1.toggle()
                        }
                    }) {
                        Text("Go to view 1")
                    }
                }.transition(.move(edge: .leading))
            }
        }
    }
}

我试图证明另一种方法不会做到这一点:

struct View1: View {
    @State var GoToView2: Bool = false
    var counter: Int

    init(counter: Int) {
        self.counter = counter + 1
    }

    var body: some View {
        VStack {
            if (GoToView2) {
                Text("\(self.counter)")
                View2(counter: self.counter, GoToView1: self.$GoToView2)
            } else {
                VStack {
                    Button(action: {
                        withAnimation {
                            self.GoToView2.toggle()
                        }
                    }) {
                        Text("Go to view 2")
                    }
                }
            }
        }
    }
}

struct View2: View {
    @Binding var GoToView1: Bool
    var counter: Int

    init(counter: Int, GoToView1: Binding<Bool>) {
        self._GoToView1 = GoToView1
        self.counter = counter + 1
    }

    var body: some View {

            VStack {
                Text("\(self.counter)")
                Button(action: {
                    withAnimation {
                        self.GoToView1.toggle()
                    }
                }) {
                    Text("Go to view 1")
                }
            }.transition(.move(edge: .leading))


    }
}

我不知道这个滞后是否是真正的原因,或者是否有更好的证明方法,但是现在这就是我的想法。

原始答案

我建议您执行以下操作:

struct View1: View {
    @State var GoToView2:Bool = false
    var body: some View {
        ZStack {
            if (GoToView2) {
                View2(GoToView1: self.$GoToView2)
            } else {
                VStack {
                    Button(action: {
                        withAnimation {
                            self.GoToView2.toggle()
                        }
                    }) {
                        Text("Go to view 2")
                    }
                }
            }
        }
    }
}

struct View2: View {
    @Binding var GoToView1: Bool
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.GoToView1.toggle()
                }
            }) {
                Text("Go to view 1")
            }
        }.transition(.move(edge: .leading))
    }
}