SwiftUI 性能问题，iOS 14.2 中的 UI 滞后

Question

I am working on an app in SwiftUI, prior to iOS 14.2 UI updates were smooth as butter, But from iOS 14.2, UI updates with a large amount of data or complex data seem to be very laggy (for example using the LazyVGrid or LazyHGrid with a medium amount of data for more than 20 elements in the pageTabView makes the UI updates too slow.

Here is my code for GridView

 var body: some View {
    
    ScrollView {
        VStack {
            LazyVGrid(columns: columns, spacing: 10.0) {
                ForEach(self.favViewModel.favourites.indices, id: \.self) { fav in
                    createGridCellView(fav: fav)
                        .onLongPressGesture {
                        self.selectedItem = fav
                        self.hasSelectedDropDown = true
                    }
                        .alert(isPresented: self.$showDeleteAlert, content: { () -> Alert in
                            Alert(title: Text("Are you sure you want to delete this?"), message: Text("There is no undo"), primaryButton: .destructive(Text("Delete")) {
                                self.favViewModel.send(action: .deleteFavourite(item: selectedItem))
                            }, secondaryButton: .cancel())
                        })
                }
            }
            
            Color.clear.padding(.bottom, 100)
        }
        
        
        .actionSheet(isPresented: self.$hasSelectedDropDown, content: { () -> ActionSheet in
            ActionSheet(title: Text("Delete Favourite"), buttons: [.destructive(Text("Delete"), action: {
                self.showDeleteAlert = true
            }),.cancel()])
        })
        
    }
    .padding(.top, 10.0)
    .padding(.bottom, 30.0)
    
}

Grid Cell View

struct FavouriteGridCell: View {
@Binding var name: String
@State var icon: String
var handler: () -> Void



func createTransparentCircle() -> some View {
    Circle()
        .frame(width: 80, height: 80)
        .shadow(radius: 1.0)
        .foregroundColor(Color.clear)
        .background(BlurView(style: .light).cornerRadius(50.0).brightness(-0.1))
}

func createRectangleView() -> some View {
    Rectangle()
        .fill(Color.white.opacity(0.3))
        .frame(height: 20.0)
        .cornerRadius(12.5)
}

var body: some View {
    VStack {
        ZStack {
            createTransparentCircle()
            Image(icon)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)
            
        }.onTapGesture {
            handler()
        }
        
        Text(name)
            .font(Font.custom(Theme.Fonts.Asap_Semibold, size: 14.0))
            .foregroundColor(Color.white)
            .fontWeight(.bold)
            .frame(minWidth: 0,
                   maxWidth: .infinity,
                   minHeight: 0,
                   maxHeight: .infinity,
                   alignment: .center)
            .lineLimit(2)
        
        Color.clear.padding(.bottom, 10.0)
    }
}

}

Code for PageTabView

VStack {
                    
    TabView(selection: $currentPage){
    FavouriteGridView(favViewModel:       self.favouriteViewModel,soundsViewModel: self.soundsViewModel)
                                .tag(0)
                            
                        }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                    }

Does anyone experience the same issues?

I am looking forward to your help. Thank You

Answer 1

问题出在 TabView(PageTabViewStyle) 上，我不知道为什么，但由于 iOS 14.2 在 tabview 中添加数据会使 UI 无响应且滞后，所以现在，我最终删除了苹果提供的 PageTabView 并添加了一个自定义页面样式 TabView 从这里https://swiftwithmajid.com/2019/12/25/building-pager-view-in-swiftui/ 。

Answer 2

my two cents for other people arriving here..

I got an heavy performance problem. I DID use LazyVGrid from start, but I hade big performance issues the same.

It was a stupid mistake (due to refactoring.. with few cells it does work fine..)

I had:

...
  ScrollView {
                 Text("Products:")  
                 ProductsLazyGrid(products: filteredProducts(),
                    
                 }
                }

My mistake was:

INSIDE ProductsLazyGrid I DID write another one:

   var body: some View {
        ScrollView {
            
            LazyVGrid(columns: calcColumns(), spacing: VSpacing)

.... }

So first thing (before ever firing up Instruments... as per Apple: https://developer.apple.com/documentation/swiftui/creating-performant-scrollable-stacks )

triple check nested Scrollviews.

Hope can help.

Technically I think nesting scrollViews will force SwiftUI to make calculations ANYWAY, zeroing any advantage of laziness.