鸿蒙HarmonyOS NEXT开发：LoadingProgress（基础组件）

LoadingProgress

用于显示加载动效的组件。
   阐明：
  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标志该内容的起始版本。
  子组件

无
接口

LoadingProgress()
创建加载希望组件。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
属性

除支持通用属性外，还支持以下属性：
color

color(value: ResourceColor)
设置加载进度条远景致。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueResourceColor是加载进度条的远景致。
默认值：
API version 10及以下：‘#99666666’
API version 11及以上：‘#ff666666’ enableLoading10+

enableLoading(value: boolean)
设置LoadingProgress动画显示或者不显示。LoadingProgress动画不显示时，该组件依旧占位。通用属性Visibility.Hidden隐藏的是包罗border、padding等整个组件范围，而enableLoading=false只隐藏LoadingProgress本身动画内容，不包罗border等。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueboolean是LoadingProgress动画是否显示。
默认值：true contentModifier12+

contentModifier(modifier: ContentModifier<LoadingProgressConfiguration>)
定制LoadingProgress内容区的方法。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明modifierContentModifier<LoadingProgressConfiguration>是在LoadingProgress组件上，定制内容区的方法。
modifier: 内容修改器，开发者需要自界说class实现ContentModifier接口。 事件

支持通用事件。
LoadingProgressConfiguration12+对象阐明

开发者需要自界说class实现ContentModifier接口。
参数名类型默认值阐明enableloadingbooleantrueLoadingProgress动画是否显示。
默认值：true。 示例

示例1

1. // xxx.ets
2. @Entry
3. @Component
4. struct LoadingProgressExample {
5.   build() {
6.     Column({ space: 5 }) {
7.       Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
8.       LoadingProgress()
9.         .color(Color.Blue)
10.         .layoutWeight(1)
11.     }.width('100%').margin({ top: 5 })
12.   }
13. }
14. <strong>ts</strong>

复制代码

示例2

1. //该示例实现了自定义LoadingProgress的功能，实现了通过按钮切换是否显示LoadingProgress。点击按钮，config.enableLoading切换为false, 不显示LoadingProgress。。
2. // xxx.ets
3. import hilog from '@ohos.hilog'
5. import promptAction from '@ohos.promptAction'
7. class MyLoadingProgressStyle implements ContentModifier<LoadingProgressConfiguration> {
8.   enableLoading: boolean = false
10.   constructor(enableLoading: boolean) {
11.     this.enableLoading = enableLoading
12.   }
14.   applyContent(): WrappedBuilder<[LoadingProgressConfiguration]> {
15.     return wrapBuilder(buildLoadingProgress)
16.   }
17. }
19. let arr1: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
20. let arr2: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
22. @Builder
23. function buildLoadingProgress(config: LoadingProgressConfiguration) {
24.   Column({ space: 8 }) {
25.     Row() {
26.       Column() {
27.         Circle({
28.           width: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80,
29.           height: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80
30.         })
31.           .fill(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3)
32.       }.width('50%')
34.       Column() {
35.         Button('' + ((config.contentModifier as MyLoadingProgressStyle).enableLoading))
36.           .onClick((event: ClickEvent) => {
37.             promptAction.showToast({
38.               message: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) + ''
39.             })
40.           })
41.           .fontColor(Color.White)
42.           .backgroundColor(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3)
43.       }.width('50%')
45.     }
47.     Row() {
48.       Column() {
49.         Gauge({
50.           value: (config.contentModifier as MyLoadingProgressStyle).enableLoading?50:30, min: 11, max: 100
51.         }) {
52.           Column() {
53.             Text('60')
54.               .maxFontSize("180sp")
55.               .minFontSize("160.0vp")
56.               .fontWeight(FontWeight.Medium)
57.               .fontColor("#ff182431")
58.               .width('40%')
59.               .height('30%')
60.               .textAlign(TextAlign.Center)
61.               .margin({ top: '22.2%' })
62.               .textOverflow({ overflow: TextOverflow.Ellipsis })
63.               .maxLines(1)
64.           }.width('100%').height('100%')
65.         }
67.         .colors(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3)
68.         .width(200)
69.         .strokeWidth(18)
70.         .padding(5)
71.         .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
72.         .height(200)
73.       }.width('100%')
75.     }
77.     Column() {
78.       List({ space: 20, initialIndex: 0 }) {
79.         ForEach(arr2, (item: string) => {
80.           ListItem() {
81.             Text((config.contentModifier as MyLoadingProgressStyle).enableLoading ? '' + item : Number(item) * 2 + '')
82.               .width('100%')
83.               .height('100%')
84.               .fontColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.White : Color.Orange)
85.               .fontSize((config.contentModifier as MyLoadingProgressStyle).enableLoading ? 16 : 20)
86.               .textAlign(TextAlign.Center)
87.               .backgroundColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.Grey : 0x2577e3)
88.           }
89.           .height(110)
90.           .border({
91.             width: 2,
92.             color: Color.White
93.           })
94.         }, (item: string) => item)
95.       }
96.       .height(200)
97.       .width('100%')
98.       .friction(0.6)
100.       .lanes({ minLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading?40:80, maxLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading?40:80 })
101.       .scrollBar(BarState.Off)
102.     }
104.   }.width("100%").padding(10)
105. }
108. @Entry
109. @Component
110. struct LoadingProgressDemoExample {
111.   @State loadingProgressList: (boolean | undefined | null)[] = [undefined, true, null, false]
112.   @State widthList: (number | string)[] = ['110%', 220, '40%', 80]
113.   @State loadingProgressIndex: number = 0
114.   @State clickFlag: number = 0
115.   scroller: Scroller = new Scroller()
117.   build() {
118.     Column() {
119.       Scroll(this.scroller) {
120.         Column({ space: 5 }) {
121.           Column() {
122.             LoadingProgress()
123.               .color('#106836')
124.               .size({ width: '100%' })
125.               .contentModifier(new MyLoadingProgressStyle(this.loadingProgressList[this.loadingProgressIndex]))
126.           }.width('100%').backgroundColor(0xdcdcdc)
127.         }.width('100%').margin({ top: 5 })
128.       }.height('85%')
130.       Button('点击切换config.enableloading').onClick(() => {
131.         this.clickFlag++
132.         this.loadingProgressIndex = (this.loadingProgressIndex + 1) % this.loadingProgressList.length
133.         console.log('enableLoading:' + this.loadingProgressList[this.loadingProgressIndex])
134.       }).margin(20)
135.     }
137.   }
138. }
139. <strong>ts</strong>

复制代码

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想约请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  
• 关注小编，同时可以等待后续文章ing ，不定期分享原创知识。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。