• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(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实现环形进度条。

 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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
swift UI专项训练27 UIButton按钮控件发布时间:2022-07-13
下一篇:
Swift中配置Keystone服务(转)发布时间:2022-07-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap