SwiftUI 性能问题，iOS 14.2 中 UI 卡顿。

Question

我正在使用SwiftUI开发一个应用程序，在iOS 14.2之前，UI更新非常流畅。但是从iOS 14.2开始，当数据量大或数据复杂时，UI更新似乎非常卡顿（例如，在pageTabView中使用LazyVGrid或LazyHGrid并且有超过20个元素的中等数量的数据会使UI更新变得太慢。

这是我的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)
    
}

网格单元视图

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)
    }
}

页面选项卡视图的代码

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

有人遇到相同的问题吗？

我期待你的帮助。谢谢。

- Bilal Mustafa

---

你能提供你的代码或可重现的演示吗？ - Asperi

Answer 1

问题出在TabView (PageTabViewStyle)上，我不知道为什么，但是自从iOS 14.2后，在tabview中添加数据会导致UI无响应和卡顿。目前，我已经移除了苹果提供的PageTabView，并从这里添加了一个自定义的页面样式TabView: https://swiftwithmajid.com/2019/12/25/building-pager-view-in-swiftui/。

- Bilal Mustafa

---

遇到了完全相同的问题，也使用了TabBar。在iOS 14.8（iPhone 13 Pro）上渲染非常缓慢且卡顿。 → 在iOS 15中似乎问题已经解决了（在iPhone 13 Pro Max上完美流畅）。 - Kuringan

尝试移除所有的TabView，但问题仍未解决。 - Binh Ho

Answer 2

对其他来到这里的人，我有一些建议。

我遇到了一个严重的性能问题。我一开始确实使用了LazyVGrid，但是我仍然遇到了很大的性能问题。

后来发现是个愚蠢的错误（由于重构..在几个单元格中它运行正常..）

我的错误如下：

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

我的错误是：

在ProductsLazyGrid内部，我确实写了另一个：

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

... }

首先（在启动Instruments之前...根据Apple的建议：https://developer.apple.com/documentation/swiftui/creating-performant-scrollable-stacks），

三次检查嵌套的Scrollviews。

希望能有所帮助。

从技术上讲，我认为嵌套scrollViews将强制SwiftUI进行计算，无论如何都会抵消任何懒惰的优势。

- ingconti

---

尝试过了，但是问题依旧。 - Binh Ho