在SwiftUI中加载异步请求时显示活动指示器 [英] Displaying activity indicator while loading async request in SwiftUI

问题描述

我有一个基本视图，该视图显示一个列表，该列表从API提取数据.我想在从API检索数据时实现活动指示器.在MVC中，我们可以使用委托和协议，并使视图控制器继承协议，在模型获取数据后，我们调用委托以告知视图控制器数据已完成检索(现在隐藏活动指示器，等等).).如何在SwiftUI及其MVVM风格中实现类似的目的?

我尝试通过此问题实施活动指标，但我不知道如何以及何时停止该指标:

解决方案

您的视图模型应具有加载状态，如下所示

  @Published var loading = false私人功能fetchSources(){self.loading = trueNetworkManager.shared.getSourceData {(来源)在self.sources = sources.map(SourcesViewModel.init)self.loading =假}} 

和活动指示器应与其绑定，例如

  ActivityIndi​​catorView(isShowing:$ model.loading){ 

I have a basic view that displays a list that fetches data from an API. I want to implement an activity indicator while the data is being retrieved from the API. In MVC we could use a delegate and protocol and make the view controller inherit the protocol, and after the model has finished fetching the data we call the delegate to tell the view controller that the data has finished retrieving (now hide the activity indicator, etc.). How to achieve a similar thing in SwiftUI and it's MVVM style?

I have tried implementing an activity indicator from this question, I just don't get how and when to stop it: Activity indicator in SwiftUI

My SourcesViewModel (it fetches news article sources from newsapi.org)

import UIKit

class SourcesViewModel: Identifiable {

    let id = UUID()

    let source: Sources

    init(source: Sources) {
        self.source = source
    }

    var name: String {
        return self.source.sourceName
    }

    var description: String {
        return self.source.sourceDescription
    }
}

My SourcesListViewModel:

import Combine

class SourcesListViewModel: ObservableObject {

    init() {
        fetchSources()
    }

    @Published var sources = [SourcesViewModel]()
    private func fetchSources() {
        NetworkManager.shared.getSourceData { (sources) in
            self.sources = sources.map(SourcesViewModel.init)
        }
    }
}

Lastly, my SourcesView:

import SwiftUI

struct SourcesView: View {
    @ObservedObject var model = SourcesListViewModel()

    var body: some View {
        ActivityIndicatorView(isShowing: .constant(true)) {
            NavigationView {
                List(self.model.sources) { source in
                    VStack(alignment: .center) {
                        Text(source.name)

                        Text(source.description)
                            .foregroundColor(.secondary)
                            .lineLimit(3)
                    }
                    .navigationBarTitle(Text("Sources"), displayMode: .inline)
                }
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        SourcesView()
    }
}

The result:

解决方案

Your view model should have loading state, like the following

@Published var loading = false
private func fetchSources() {
    self.loading = true
    NetworkManager.shared.getSourceData { (sources) in
        self.sources = sources.map(SourcesViewModel.init)
        self.loading = false
    }
}

and activity indicator should be bound to it, like

ActivityIndicatorView(isShowing: $model.loading) {

这篇关于在SwiftUI中加载异步请求时显示活动指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！