包含来自 API 的图像的 SwiftUI 列表滞后

Question

我正在使用 SwiftUI 构建一个包含来自 API 的图像的列表，但该列表是滞后的。下载图像时存在一些滞后，我可以根据显示的 ProgressView 来理解这一点。 API 调用是异步的，所以我不知道发生了什么。

final class CatsGridViewModel: ObservableObject {
    private let apiService: APIService
    private (set) var page = 0
    
    var isLoading = false
    
    init(apiService: APIService = APIService()) {
        self.apiService = apiService
    }
    
    @MainActor
    func fetchCats() async {
        if !isLoading {
            isLoading = true
            let array = await apiService.fetchImages(.thumb, page: page, limit: 25)
            catsArray.append(contentsOf: array)
            page += 1
            isLoading = false
        }
    }
}

struct CatGridView: View {
    
    @StateObject var viewModel = CatsGridViewModel()
    
    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVStack {
                    ForEach(viewModel.catsArray) { cat in
                        VStack {
                            CatRowView(cat: cat)
                                .padding(.horizontal)
                        }
                    }
                }
            }
            .task {
                await viewModel.fetchCats()
            }
            .navigationTitle("Cats: \(viewModel.page)")
        }
    }
}

struct CatRowView: View {
    
    var cat: Cat
    
    var body: some View {
        HStack {
            AsyncImage(url: URL(string: cat.url)!) { image in
                image
                    .resizable()
                    .clipShape(Circle())
                    .frame(width: 100, height: 100)
            } placeholder: {
                ProgressView()
                    .frame(width: 100, height: 100)
            }
        }
    }
}

Answer 1

.task 替换了 @StateObject 所以尝试删除它。从异步函数中返回猫。

对页面使用任务(id:page)