0

我的健身应用程序上有一个标签，显示了我的应用程序上的所有健身教练，从 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)

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

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

4

2 回答 2

1

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

然而，最有帮助的事情是消除了训练室的阴影。这似乎是造成最大滞后的原因。

于 2021-10-12T22:22:38.610 回答
0

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

于 2021-10-08T21:13:20.490 回答