使用 LazyVGrid 时的性能问题

Question

我有一个非常简单的应用程序：4,000 张图像（.jpg 中的 400x400）需要连续显示 3 张。所有图像都存储在文件存储中，并且等于设备宽度的 1/3，因此我不需要调整大小/重新缩放它，而是按原样显示。

这是正文代码：

var body: some View {
    ScrollView {
        LazyVGrid(columns: Array(repeating: GridItem(.fixed(size), spacing: 1), count: 3),
                  alignment: .center,
                  spacing: 0) {
            ForEach(controller.newAlbums, id: \.self) { album in
                PhotoThumbnailView(filePath: album)
            }
        }
    }
    .task {
        controller.loadUserAlbums()
    }
}

let size = UIScreen.main.bounds.width/3

struct PhotoThumbnailView: View {
    @State private var image: Image?
    @State private var imageFileURL: String
    
    init(filePath: String) {
        self.imageFileURL = filePath
    }
    
    func readFromFile(){
        if let uiImage = UIImage(contentsOfFile: imageFileURL) {
            self.image = Image(uiImage: uiImage)
        }
    }
    
    var body: some View {
        ZStack {
            if let img = image {
                img
            } else {
                Rectangle()
                    .foregroundColor(.clear)
                    .frame(width: size, height: size)
                ProgressView()
            }
        }
        .task({
            readFromFile()
        })
        .onDisappear {
            image = nil
        }
    }
}

问题是，当我向下滚动（甚至缓慢变化）时，它会滞后并且滚动动画不平滑。如何解决以上问题？

Answer 1

我也遇到了滚动性能问题。

解决方案是简单地将

ScrollView

替换为

List

。

所以你的代码看起来像：

var body: some View {
    List {
        LazyVGrid(columns: Array(repeating: GridItem(.fixed(size), spacing: 1),
                  count: 3),
                  alignment: .center,
                  spacing: 0)
        {

            ForEach(controller.newAlbums, id: \.self) { album in
                PhotoThumbnailView(filePath: album)
            }
        }
    }
    .task {
        controller.loadUserAlbums()
    }
}