尝试分页 SwiftUI 时,进度视图不会在第二次加载时显示

Sim*_*eil 9 xcode pagination swiftui

尝试分页时,进度视图不会在第二次加载时显示。当我滚动到底部时,进度视图将出现一次。但其他时候则不然。这似乎只在我使用某种动画时才会发生。

如果我只有一个像“正在加载...”这样的静态文本,它就会按预期工作。我添加了一个部分组,它在其中检查条件以验证是否应该显示它。不确定我是否应该使用像 UIKit 中的加载指示器那样的“停止动画”之类的东西

在此输入图像描述

struct ContentView: View {
    @State var movies: [Movie] = []
    @State var currentPage = 1
    @State private var isLoading = false
    
    var body: some View {
        NavigationView {
            List {
                Section {
                    
                } header: {
                    Text("Top Movies")
                }
                
                ForEach(movies) { movie in
                    HStack(spacing: 8) {
                        AsyncImage(url: movie.posterURL, scale: 5) { image in
                            image
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 100)
                                .cornerRadius(10)
                        } placeholder: {
                            ProgressView()
                                .frame(width: 100)
                        }
                        
                        VStack(alignment: .leading, spacing: 10) {
                            Text(movie.title)
                                .font(.headline)
                            Text(movie.overview)
                                .lineLimit(5)
                                .font(.subheadline)
                            Spacer()
                        }
                        .padding(.top, 10)
                    }
                    .onAppear {
                        Task {
                            //Implementing infinite scroll
                            if movie == movies.last {
                                isLoading = true
                                currentPage += 1
                                movies += await loadMovies(page: currentPage)
                                isLoading = false
                            }
                        }
                    }
                }
                
                Section {
                    
                } footer: {
                    if isLoading {
                        HStack {
                            Spacer()
                            ProgressView()
                                .tint(.green)
                            Spacer()
                        }
                    } else {
                        EmptyView()
                    }
                }
            }
            .navigationTitle("Movies")
            .navigationBarTitleDisplayMode(.inline)
            .listStyle(.grouped)
            .task {
                movies = await loadMovies()
            }
            .refreshable {
                movies = await loadMovies()
            }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

即使当我查看视图层次结构时,进度视图方块也在那里,但图标/加载指示器未显示: 在此输入图像描述

如果我添加覆盖修改器,它可以工作,但我不喜欢这样做,因为当我在内容完成加载之前向后滚动时,微调器位于列表视图之上:?

    .overlay(alignment: .bottom, content: {
        if isLoading {
            HStack {
                Spacer()
                ProgressView()
                    .tint(.green)
                Spacer()
            }
        } else {
            EmptyView()
        }
    })
Run Code Online (Sandbox Code Playgroud)

小智 12

我们也遇到了这个问题,我们认为这是ProgressView的一个bug。我们的临时修正是使用唯一的 id 来识别 ProgressView,以便再次渲染它。

struct ContentView: View {
    @State var id = 0

    var body: some View {
        ProgressView()
            .id(id)
            .onAppear {
                ...
                id += 1
            }
    }
}
Run Code Online (Sandbox Code Playgroud)