SwiftUI Firestore LazyVGrid 导航因更多元素而变慢

Question

我的健身应用程序上有一个选项卡，显示我的应用程序上的所有健身教练，这些都是从 firestore 中提取的。我注意到，当网格显示超过 4-5 个培训师时，当我点击培训师（导航 link 到他们的个人资料）时，过渡非常缓慢且缓慢，当我按下培训师个人资料上的后退按钮 return 到所有培训师的网格。

这是我用于显示所有培训师的选项卡的代码：

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)

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

我的代码中是否有任何内容似乎会导致导航 link 的性能如此差和转换缓慢？

Answer 1

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

Answer 2

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

然而，最有帮助的是去除训练器单元格的阴影。这似乎是造成最大滞后的原因。

SwiftUI Firestore LazyVGrid 导航因更多元素而变慢

SwiftUI Firestore LazyVGrid Navigation Slows with more elements

xcode

firebase

google-cloud-firestore

swiftui

lazyvgrid