SwiftUI Firestore LazyVGrid 导航随着更多元素而变慢答案

【问题标题】：SwiftUI Firestore LazyVGrid Navigation Slows with more elementsSwiftUI Firestore LazyVGrid 导航随着更多元素而变慢
【发布时间】：2021-10-08 17:10:23
【问题描述】：

我的健身应用上有一个标签，其中显示了我应用上的所有健身教练，都是从 Firestore 中提取的。我注意到，当网格显示超过 4-5 位培训师时，当我点击一位培训师（指向他们个人资料的导航链接）时，过渡非常缓慢且缓慢，当我按下后退按钮时也会发生同样的事情培训师资料返回到所有培训师的网格。

这是显示所有培训师的标签的代码：

ScrollView (.vertical, showsIndicators: false, content: {
        
        VStack (alignment: .leading, spacing: 15){
            
            //PAGE TITLE
            HStack {
                Text("Explore creators")
                    .font(.system(size: 22, weight: .semibold))
                    .foregroundColor(.black)
                
                Spacer(minLength: 0)
                
            }
            .padding(.horizontal)

            
            LazyVGrid(columns: items, alignment: .leading, spacing: 12, content: {
                
                //FOR EACH LOOP TO SHOW ALL TRAINERS
                ForEach(topTrainers) { trainer in
                
                    NavigationLink(
                        destination: TrainerView(trainer: trainer, user: user),
                        label: {
                            ExploreGridCell(trainer: trainer)
                        })
                    
                //END OF FOR EACH LOOP
                }
            //END OF LAZYVGRID
            })
            .padding(.top, 6)
            .padding(.horizontal)
            
            
        }
        .padding(.bottom)
        .padding(.top)
        
    })
    .background(Color("fiticBg").ignoresSafeArea())
    .navigationBarTitle("")
    .navigationBarHidden(true)
    .onTapGesture {
        self.hideKeyboard()
    }

这是我的lazyVGrid 中训练单元的代码：

ZStack {
        KFImage(URL(string: trainer.trainerImageUrl))
            .loadImmediately()
            .resizable()
            .scaledToFill()
            .frame(width: width, height: 175)
            .clipped()
        
        Rectangle()
            .foregroundColor(.clear)
            .background(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .center, endPoint: .bottom))
        
        VStack (alignment: .leading, spacing: 5){
            
            //TRAINER CERTIFICATION BADGE
            if trainer.trainerCertified {
                HStack {
                    
                    ZStack {
                        Color(.white)
                            .frame(width: 15, height: 15)
                        
                        Image(systemName: "checkmark.seal.fill")
                            .font(.title2)
                            .foregroundColor(Color("fiticGreen"))
                    }
                    .clipShape(Circle())
                    
                    
                    Spacer(minLength: 0)
                }
            } else {
                //SHOW NOTHING HERE IF TRAINER IS NOT CERTIFIED
            }
            
            Spacer()
            
            //CONTENT TITLE WITH SPACER FOR SECOND LINE OVERLAP
            HStack {
                Text(trainer.trainerName)
                    .font(.system(size: 16, weight: .bold))
                    .foregroundColor(.white)
                
                Spacer(minLength: 0)
            }
            
        }
        .padding(.horizontal, 10)
        //PUSHES TRAINER NAME UP A BIT
        .padding(.bottom)
        //PUSHES CERTIFICATION BADGE DOWN A BIT
        .padding(.top, 5)
    }
    .cornerRadius(8)
    .shadow(color: Color.black.opacity(0.25), radius: 5, x: 0, y: 5)

从其他堆栈溢出问题中，我看到了有关使用列表而不是滚动视图的事情，但我已经尝试过，但它不适用于我的视图需要如何设置。

我的代码中是否有任何东西似乎会导致导航链接的性能如此差和过渡缓慢？

【问题讨论】：

我在这里看不到任何与 Firestore 相关的代码，因此很难判断它是如何连接的。如果您在没有KFImage 的情况下尝试它会发生什么？如果您导航到一个简单的Text 而不是TrainerView，会发生什么？
@jnpdx 所以它肯定来自从 Firestore 中拉下的图像。如果我让它只是一个空白的文本屏幕，那么就没有延迟。虽然目前只有大约 10 个图像同时被拉出，所以有这么多的滞后似乎很奇怪。我压缩了所有图像以使文件更小，它使延迟稍微好一点，但仍然不是一个完美的解决方案。

标签： xcode firebase google-cloud-firestore swiftui lazyvgrid

【解决方案1】：

因此，从其他建议来看，问题的一部分似乎是从 Firestore 加载图像，因为它们是如此大的文档。所以我压缩了图像，它有点帮助。

然而，最有帮助的是从训练室中移除阴影。这似乎是造成最大延迟的原因。

【讨论】：

【解决方案2】：

您的代码中似乎没有什么会导致这种延迟，除了为培训师检索图像的时间。从互联网上提取的任何内容都会受到事实来源延迟的影响。解决这个问题的一个问题是从本地获取十几张图片，以确定从本地获取图片时延迟是否消失。如果是这样，那么您需要查看 FireStore

【讨论】：

所以它肯定来自从 Firestore 中拉下的图像。如果我让它只是一个空白的文本屏幕，那么就没有延迟。虽然目前只有大约 10 个图像同时被拉出，所以有这么多的滞后似乎很奇怪。我压缩了所有图像以使文件更小，它使延迟稍微好一点，但仍然不是一个完美的解决方案。