1 import SwiftUI
 2 //导入环形进度条类型所在的框架。
 3 import UIKit
 4 
 5 struct ContentView : View
 6 {
 7     //添加一个布尔属性，表示是否执行环形进度条的动画效果。
 8     @State var isActive = true
 9     
10     var body: some View
11     {
12         //添加一个环形进度条，并向它传递当前的布尔属性，
13         //由于环形进度条的属性拥有@Binding标记，
14         //所以当isActive属性的值发生变化时，
15         //环形进度条里的属性的值也会发生变化。
16         LoadingView(isActive: self.$isActive)
17             //添加一个显示onAppear方法，在环形进度条显示之后，执行一段代码。
18             .onAppear
19             {
20                 //创建一个定时器，定时器的间隔为2秒，并且只执行一次。
21                 Timer.scheduledTimer(withTimeInterval: 2, repeats: false)
22                 { (timer) in
23                     //在环形进度条显示2秒之后，设置属性的值为false，
24                     self.isActive.toggle()
25                     //也就是隐藏环形进度条，并且取消定时器
26                     timer.invalidate()
27                 }
28         }
29     }
30 }
31 
32 //使当前的结构体遵循UIViewRepresentable（视图替代）协议，
33 //使用该协议的实例，可以在SwiftUI中创建和管理UIView对象。
34 struct ActivityIndicator: UIViewRepresentable
35 {
36     //当在结构体之间进行数值的传递时，传递的是属性的一个副本。
37     //所以需要使用 @Binding 标记，将属性变成引用类型，对结构体之间的属性进行引用绑定。
38     //这样当属性的值发生变化时，另一个引用该属性的结构体的属性也会同时发生变化。
39     @Binding var isActive: Bool
40     
41     //此处实现makeUIView方法，用来初始化并返回一个环形进度条对象。
42     func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView
43     {
44         //返回一个环形进度条对象，并设置它的样式为大型尺寸。
45         return UIActivityIndicatorView(style: UIActivityIndicatorView.Style.large)
46     }
47     
48     //实现协议里的更新视图方法updateUIView方法，
49     //用来设置环形进度条的运行状态。
50     func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>)
51     {
52         //根据布尔属性的值，设置环形进度条的运行状态。
53         isActive ? uiView.startAnimating() : uiView.stopAnimating()
54     }
55 }
56 
57 //添加一个遵循视图View协议的结构体对象，
58 //用来创建一个包含提示文字的环形进度条。
59 struct LoadingView: View
60 {
61     //同样使用@Binding标记，添加一个属性，标识是否开始执行环形进度条的动画效果。
62     @Binding var isActive: Bool
63     
64     //实现协议里规定必须实现的body属性，所有子视图都需要放置在body属性里。
65     var body: some View
66     {
67         //添加一个垂直排列视图，作为子视图的容器。
68         VStack
69             {
70                 //添加一个文本视图，文本视图作为环形进度条的标签。
71                 Text("Waiting...")
72                 //添加一个环形进度条。
73                 ActivityIndicator(isActive: self.$isActive)
74         }
75             //设置VStack视图的宽度为屏幕宽度的一半
76             //高度为屏幕高度的五分之一
77             .frame(width: UIScreen.main.bounds.width / 2,
78                    height: UIScreen.main.bounds.height / 5)
79             //背景颜色
80             .background(Color.orange)
81             //前景颜色为主色，也就是黑色
82             .foregroundColor(Color.primary)
83             //并且拥有尺寸为20的圆角效果。
84             .cornerRadius(20)
85             //设置VStack视图的不透明度，
86             //当属性的布尔值为false时，隐藏环形进度条。
87             .opacity(self.isActive ? 1 : 0)
88     }
89 }
90 
91 #if DEBUG
92 struct ContentView_Previews : PreviewProvider
93 {
94     static var previews: some View
95     {
96         ContentView()
97     }
98 }
99 #endif