1# LoadingProgress 2 3用于显示加载动效的组件。 4 5加载动效在组件不可见时停止，组件的可见状态基于[onVisibleAreaChange](./ts-universal-component-visible-area-change-event.md#onvisibleareachange)处理，可见阈值ratios大于0即视为可见状态。 6 7> **说明：** 8> 9> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 子组件 13 14无 15 16 17## 接口 18 19LoadingProgress() 20 21创建加载进展组件。 22 23**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 24 25**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29## 属性 30 31除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 32 33> **说明：** 34> 35> 组件应设置合理的宽高，当组件宽高设置过大时加载动效可能不符合预期效果。 36 37### color 38 39color(value: ResourceColor) 40 41设置加载进度条前景色。 42 43**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 44 45**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**参数：** 50 51| 参数名 | 类型 | 必填 | 说明 | 52| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 53| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 加载进度条的前景色。<br/>默认值：<br/>API version 10及以下：'#99666666'<br/>API version 11及以上：'#ff666666' | 54 55### enableLoading<sup>10+</sup> 56 57enableLoading(value: boolean) 58 59设置LoadingProgress动画显示或者不显示。LoadingProgress动画不显示时，该组件依旧占位。通用属性[Visibility.Hidden](ts-universal-attributes-visibility.md#visibility)隐藏的是包括[border](ts-universal-attributes-border.md#border)、[padding](ts-universal-attributes-size.md#padding)等整个组件范围，而enableLoading=false只隐藏LoadingProgress本身动画内容，不包括border等。 60 61 62**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66**参数：** 67 68| 参数名 | 类型 | 必填 | 说明 | 69| ------ | ------- | ---- | ---------------------------------------------- | 70| value | boolean | 是 | LoadingProgress动画是否显示。<br/>默认值：true，true表示显示LoadingProgress动画，false表示不显示LoadingProgress动画。 | 71 72### contentModifier<sup>12+</sup> 73 74contentModifier(modifier: ContentModifier\<LoadingProgressConfiguration>) 75 76定制LoadingProgress内容区的方法。 77 78**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82**参数：** 83 84| 参数名 | 类型 | 必填 | 说明 | 85| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 86| modifier | [ContentModifier\<LoadingProgressConfiguration>](#loadingprogressconfiguration12对象说明) | 是 | 在LoadingProgress组件上，定制内容区的方法。<br/>modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 | 87 88## 事件 89 90支持[通用事件](ts-component-general-events.md)。 91 92## LoadingProgressConfiguration<sup>12+</sup>对象说明 93 94开发者需要自定义class实现ContentModifier接口。 95 96**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100| 名称 | 类型 | 只读 | 可选 | 说明 | 101| ------ | ------ | ------ |-------------------------------- |-------------------------------- | 102| enableLoading | boolean | 否 | 否 |LoadingProgress动画是否显示。<br/>默认值：true，true表示显示LoadingProgress动画，false表示不显示LoadingProgress动画。 | 103 104## LoadingProgressStyle<sup>(deprecated)</sup>枚举说明 105 106从API version 8开始废弃。 107 108**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 109 110**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 111 112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 113 114| 名称 | 说明 | 115| ---------------------- | ---------------------------------------- | 116| Default | 默认加载样式。API version 8及以后不支持设置。 | 117| Circular | 环形加载样式。API version 8及以后不支持设置。 | 118| Orbital | 彗星形加载样式。API version 8及以后默认为彗星形样式。 | 119 120## 示例 121 122### 示例1（设置颜色） 123 124该示例通过color接口，实现了设置加载动效颜色的功能。 125 126```ts 127// xxx.ets 128@Entry 129@Component 130struct LoadingProgressExample { 131 build() { 132 Column({ space: 5 }) { 133 Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%') 134 LoadingProgress() 135 .color(Color.Blue) 136 .layoutWeight(1) 137 }.width('100%').margin({ top: 5 }) 138 } 139} 140``` 141 142 143 144### 示例2（设置定制内容区） 145 146该示例通过contentModifier接口，实现了定制内容区的功能，并通过enableLoading接口实现了通过按钮切换是否显示LoadingProgress的效果。 147 148```ts 149// xxx.ets 150import { promptAction } from '@kit.ArkUI' 151 152class MyLoadingProgressStyle implements ContentModifier<LoadingProgressConfiguration> { 153 enableLoading: boolean = false 154 155 constructor(enableLoading: boolean) { 156 this.enableLoading = enableLoading 157 } 158 159 applyContent(): WrappedBuilder<[LoadingProgressConfiguration]> { 160 return wrapBuilder(buildLoadingProgress) 161 } 162} 163 164let arr1: string[] = 165 ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"] 166let arr2: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] 167 168@Builder 169function buildLoadingProgress(config: LoadingProgressConfiguration) { 170 Column({ space: 8 }) { 171 Row() { 172 Column() { 173 Circle({ 174 width: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80, 175 height: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80 176 }) 177 .fill(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 178 }.width('50%') 179 180 Column() { 181 Button('' + ((config.contentModifier as MyLoadingProgressStyle).enableLoading)) 182 .onClick((event: ClickEvent) => { 183 promptAction.showToast({ 184 message: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) + '' 185 }) 186 }) 187 .fontColor(Color.White) 188 .backgroundColor(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 189 }.width('50%') 190 191 } 192 193 Row() { 194 Column() { 195 Gauge({ 196 value: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 50 : 30, min: 11, max: 100 197 }) { 198 Column() { 199 Text('60') 200 .maxFontSize("180sp") 201 .minFontSize("160.0vp") 202 .fontWeight(FontWeight.Medium) 203 .fontColor("#ff182431") 204 .width('40%') 205 .height('30%') 206 .textAlign(TextAlign.Center) 207 .margin({ top: '22.2%' }) 208 .textOverflow({ overflow: TextOverflow.Ellipsis }) 209 .maxLines(1) 210 }.width('100%').height('100%') 211 } 212 .colors(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 213 .width(200) 214 .strokeWidth(18) 215 .padding(5) 216 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 217 .height(200) 218 }.width('100%') 219 220 } 221 222 Column() { 223 List({ space: 20, initialIndex: 0 }) { 224 ForEach(arr2, (item: string) => { 225 ListItem() { 226 Text((config.contentModifier as MyLoadingProgressStyle).enableLoading ? '' + item : Number(item) * 2 + '') 227 .width('100%') 228 .height('100%') 229 .fontColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.White : Color.Orange) 230 .fontSize((config.contentModifier as MyLoadingProgressStyle).enableLoading ? 16 : 20) 231 .textAlign(TextAlign.Center) 232 .backgroundColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.Grey : 0x2577e3) 233 } 234 .height(110) 235 .border({ 236 width: 2, 237 color: Color.White 238 }) 239 }, (item: string) => item) 240 } 241 .height(200) 242 .width('100%') 243 .friction(0.6) 244 245 .lanes({ 246 minLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 40 : 80, 247 maxLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 40 : 80 248 }) 249 .scrollBar(BarState.Off) 250 } 251 252 }.width("100%").padding(10) 253} 254 255 256@Entry 257@Component 258struct LoadingProgressDemoExample { 259 @State loadingProgressList: (boolean | undefined | null)[] = [undefined, true, null, false] 260 @State widthList: (number | string)[] = ['110%', 220, '40%', 80] 261 @State loadingProgressIndex: number = 0 262 @State clickFlag: number = 0 263 scroller: Scroller = new Scroller() 264 265 build() { 266 Column() { 267 Scroll(this.scroller) { 268 Column({ space: 5 }) { 269 Column() { 270 LoadingProgress() 271 .color('#106836') 272 .size({ width: '100%' }) 273 .contentModifier(new MyLoadingProgressStyle(this.loadingProgressList[this.loadingProgressIndex])) 274 }.width('100%').backgroundColor(0xdcdcdc) 275 }.width('100%').margin({ top: 5 }) 276 }.height('85%') 277 278 Button('点击切换config.enableloading').onClick(() => { 279 this.clickFlag++ 280 this.loadingProgressIndex = (this.loadingProgressIndex + 1) % this.loadingProgressList.length 281 console.log('enableLoading:' + this.loadingProgressList[this.loadingProgressIndex]) 282 }).margin(20) 283 } 284 285 } 286} 287``` 288
