SwiftUI实现网络加载视图UIActivityIndicatorView的艺术

2023-10-21 23:31:12

前言

网络加载视图是一个必不可少的组件，它可以向用户表明应用程序正在加载数据或执行某个任务。在SwiftUI中，没有直接提供类似于UIKit中UIActivityIndicatorView的网络加载视图控件，但我们可以通过UIViewRepresentable协议来封装UIActivityIndicatorView，从而在SwiftUI中使用它。

了解UIViewRepresentable协议

UIViewRepresentable是一个协议，它允许我们在SwiftUI中使用UIKit视图。要使用UIViewRepresentable，我们需要实现两个方法：

makeUIView(context:)：该方法负责创建一个UIView实例。
updateUIView(_:context:)：该方法负责更新UIView实例的属性。

封装UIActivityIndicatorView

要封装UIActivityIndicatorView，我们需要创建一个UIViewRepresentable结构体。该结构体必须实现makeUIView和updateUIView方法。

struct UIActivityIndicatorViewRepresentable: UIViewRepresentable {

    @Binding var isAnimating: Bool

    func makeUIView(context: Context) -> UIActivityIndicatorView {
        let activityIndicatorView = UIActivityIndicatorView()
        activityIndicatorView.style = .large
        activityIndicatorView.color = .gray
        return activityIndicatorView
    }

    func updateUIView(_ uiView: UIActivityIndicatorView, context: Context) {
        if isAnimating {
            uiView.startAnimating()
        } else {
            uiView.stopAnimating()
        }
    }
}

在SwiftUI中使用封装后的视图

现在，我们可以在SwiftUI中使用封装后的UIActivityIndicatorView了。

struct ContentView: View {

    @State private var isAnimating = false

    var body: some View {
        VStack {
            UIActivityIndicatorViewRepresentable(isAnimating: $isAnimating)

            Button("Start Animating") {
                isAnimating = true
            }

            Button("Stop Animating") {
                isAnimating = false
            }
        }
    }
}