[Swift UI]二、实用控件-(10)在SwiftUI中使用UIKit里的环形进度条

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（let_us_code）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https:////www.cnblogs.com/strengthen/p/12293287.html
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

热烈欢迎，请直接点击！！！

进入博主App Store主页，下载使用各个作品！！！

注：博主将坚持每月上线一个新app！！！

SwiftUI没有提供环形进度条，不过可以使用UIKit里的UIActivityIndicatorView实现环形进度条。

import SwiftUI
//导入环形进度条类型所在的框架。
import UIKit

struct ContentView : View
{
    //添加一个布尔属性，表示是否执行环形进度条的动画效果。
    @State var isActive = true
    
    var body: some View
    {
        //添加一个环形进度条，并向它传递当前的布尔属性，
        //由于环形进度条的属性拥有@Binding标记，
        //所以当isActive属性的值发生变化时，
        //环形进度条里的属性的值也会发生变化。
        LoadingView(isActive: self.$isActive)
            //添加一个显示onAppear方法，在环形进度条显示之后，执行一段代码。
            .onAppear
            {
                //创建一个定时器，定时器的间隔为2秒，并且只执行一次。
                Timer.scheduledTimer(withTimeInterval: 2, repeats: false)
                { (timer) in
                    //在环形进度条显示2秒之后，设置属性的值为false，
                    self.isActive.toggle()
                    //也就是隐藏环形进度条，并且取消定时器
                    timer.invalidate()
                }
        }
    }
}

//使当前的结构体遵循UIViewRepresentable（视图替代）协议，
//使用该协议的实例，可以在SwiftUI中创建和管理UIView对象。
struct ActivityIndicator: UIViewRepresentable
{
    //当在结构体之间进行数值的传递时，传递的是属性的一个副本。
    //所以需要使用 @Binding 标记，将属性变成引用类型，对结构体之间的属性进行引用绑定。
    //这样当属性的值发生变化时，另一个引用该属性的结构体的属性也会同时发生变化。
    @Binding var isActive: Bool
    
    //此处实现makeUIView方法，用来初始化并返回一个环形进度条对象。
    func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView
    {
        //返回一个环形进度条对象，并设置它的样式为大型尺寸。
        return UIActivityIndicatorView(style: UIActivityIndicatorView.Style.large)
    }
    
    //实现协议里的更新视图方法updateUIView方法，
    //用来设置环形进度条的运行状态。
    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>)
    {
        //根据布尔属性的值，设置环形进度条的运行状态。
        isActive ? uiView.startAnimating() : uiView.stopAnimating()
    }
}

//添加一个遵循视图View协议的结构体对象，
//用来创建一个包含提示文字的环形进度条。
struct LoadingView: View
{
    //同样使用@Binding标记，添加一个属性，标识是否开始执行环形进度条的动画效果。
    @Binding var isActive: Bool
    
    //实现协议里规定必须实现的body属性，所有子视图都需要放置在body属性里。
    var body: some View
    {
        //添加一个垂直排列视图，作为子视图的容器。
        VStack
            {
                //添加一个文本视图，文本视图作为环形进度条的标签。
                Text("Waiting...")
                //添加一个环形进度条。
                ActivityIndicator(isActive: self.$isActive)
        }
            //设置VStack视图的宽度为屏幕宽度的一半
            //高度为屏幕高度的五分之一
            .frame(width: UIScreen.main.bounds.width / 2,
                   height: UIScreen.main.bounds.height / 5)
            //背景颜色
            .background(Color.orange)
            //前景颜色为主色，也就是黑色
            .foregroundColor(Color.primary)
            //并且拥有尺寸为20的圆角效果。
            .cornerRadius(20)
            //设置VStack视图的不透明度，
            //当属性的布尔值为false时，隐藏环形进度条。
            .opacity(self.isActive ? 1 : 0)
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider
{
    static var previews: some View
    {
        ContentView()
    }
}
#endif