SwiftUI 中如何在数据加载完成后移除 ProgressView 进度条

核心逻辑 #

通过条件判断控制 ProgressView 和列表的显隐，调整布局结构让二者不会同时渲染。

具体修改点 #

1. 修复原代码的拼写错误：structUsers改为struct Users、classFetchUsers改为class FetchUsers、@ObservedObjectvarfetch改为@ObservedObject var fetch，否则无法正常编译
2. 将 ProgressView 和 List 放到同一个父容器中，通过 if 分支判断展示逻辑
3. 进度值达到100后销毁定时器，避免不必要的资源占用
4. 可选优化：可以将显隐条件和接口返回状态绑定（如判断fetch.users.isEmpty），避免进度走完但数据还未返回时列表为空

修改后的核心代码 #

struct ContentView: View {
    @ObservedObject var fetch = FetchUsers()
    @State private var isShowingSettings: Bool = false
    @State private var progressValue: Float = 0.0
    let timer = Timer.publish(every: 0.2, on: .main, in: .common).autoconnect()

    var body: some View {
        NavigationView {
            VStack {
                // 进度小于100时显示进度条
                if progressValue < 100 {
                    ProgressView(value: progressValue, total: 100)
                        .padding()
                        .progressViewStyle(DarkBlueShadowProgressViewStyle())
                } else {
                    // 进度满后显示列表
                    List {
                        ForEach(fetch.users) { user in
                            NavigationLink(destination: DetailedView(item: user)) {
                                RowView(item: user)
                            }
                        }
                    }
                    .navigationTitle("My App")
                    .navigationBarItems(
                        trailing:
                            Button(action: {
                                isShowingSettings = true
                            }) {
                                Image(systemName: "slider.horizontal.3")
                            }
                            .sheet(isPresented: $isShowingSettings) {
                                SettingsView()
                            }
                    )
                }
            }
            .onReceive(timer) { _ in
                if progressValue < 100 {
                    progressValue += 4
                } else {
                    // 停止定时器
                    timer.upstream.connect().cancel()
                }
            }
            .navigationViewStyle(StackNavigationViewStyle())
        }
    }
}

内容的提问来源于stack exchange，提问作者IAmNoob