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 { UIContext } from '@kit.ArkUI' 151 152class MyLoadingProgressStyle implements ContentModifier<LoadingProgressConfiguration> { 153 enableLoading: boolean = false 154 ctx: UIContext | undefined = undefined 155 156 constructor(enableLoading: boolean, ctx: UIContext) { 157 this.enableLoading = enableLoading 158 this.ctx = ctx 159 } 160 161 applyContent(): WrappedBuilder<[LoadingProgressConfiguration]> { 162 return wrapBuilder(buildLoadingProgress) 163 } 164} 165 166let arr1: string[] = 167 ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"] 168let arr2: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] 169 170@Builder 171function buildLoadingProgress(config: LoadingProgressConfiguration) { 172 Column({ space: 8 }) { 173 Row() { 174 Column() { 175 Circle({ 176 width: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80, 177 height: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80 178 }) 179 .fill(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 180 }.width('50%') 181 182 Column() { 183 Button('' + ((config.contentModifier as MyLoadingProgressStyle).enableLoading)) 184 .onClick((event: ClickEvent) => { 185 let uiContext = (config.contentModifier as MyLoadingProgressStyle).ctx; 186 if (uiContext) { 187 uiContext.getPromptAction().showToast({ 188 message: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) + '' 189 }) 190 } 191 }) 192 .fontColor(Color.White) 193 .backgroundColor(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 194 }.width('50%') 195 196 } 197 198 Row() { 199 Column() { 200 Gauge({ 201 value: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 50 : 30, min: 11, max: 100 202 }) { 203 Column() { 204 Text('60') 205 .maxFontSize("180sp") 206 .minFontSize("160.0vp") 207 .fontWeight(FontWeight.Medium) 208 .fontColor("#ff182431") 209 .width('40%') 210 .height('30%') 211 .textAlign(TextAlign.Center) 212 .margin({ top: '22.2%' }) 213 .textOverflow({ overflow: TextOverflow.Ellipsis }) 214 .maxLines(1) 215 }.width('100%').height('100%') 216 } 217 .colors(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 218 .width(200) 219 .strokeWidth(18) 220 .padding(5) 221 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 222 .height(200) 223 }.width('100%') 224 225 } 226 227 Column() { 228 List({ space: 20, initialIndex: 0 }) { 229 ForEach(arr2, (item: string) => { 230 ListItem() { 231 Text((config.contentModifier as MyLoadingProgressStyle).enableLoading ? '' + item : Number(item) * 2 + '') 232 .width('100%') 233 .height('100%') 234 .fontColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.White : Color.Orange) 235 .fontSize((config.contentModifier as MyLoadingProgressStyle).enableLoading ? 16 : 20) 236 .textAlign(TextAlign.Center) 237 .backgroundColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.Grey : 0x2577e3) 238 } 239 .height(110) 240 .border({ 241 width: 2, 242 color: Color.White 243 }) 244 }, (item: string) => item) 245 } 246 .height(200) 247 .width('100%') 248 .friction(0.6) 249 250 .lanes({ 251 minLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 40 : 80, 252 maxLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 40 : 80 253 }) 254 .scrollBar(BarState.Off) 255 } 256 257 }.width("100%").padding(10) 258} 259 260 261@Entry 262@Component 263struct LoadingProgressDemoExample { 264 @State loadingProgressList: (boolean | undefined | null)[] = [undefined, true, null, false] 265 @State widthList: (number | string)[] = ['110%', 220, '40%', 80] 266 @State loadingProgressIndex: number = 0 267 @State clickFlag: number = 0 268 scroller: Scroller = new Scroller() 269 270 build() { 271 Column() { 272 Scroll(this.scroller) { 273 Column({ space: 5 }) { 274 Column() { 275 LoadingProgress() 276 .color('#106836') 277 .size({ width: '100%' }) 278 .contentModifier(new MyLoadingProgressStyle(this.loadingProgressList[this.loadingProgressIndex], this.getUIContext())) 279 }.width('100%').backgroundColor(0xdcdcdc) 280 }.width('100%').margin({ top: 5 }) 281 }.height('85%') 282 283 Button('点击切换config.enableloading').onClick(() => { 284 this.clickFlag++ 285 this.loadingProgressIndex = (this.loadingProgressIndex + 1) % this.loadingProgressList.length 286 console.log('enableLoading:' + this.loadingProgressList[this.loadingProgressIndex]) 287 }).margin(20) 288 } 289 290 } 291} 292``` 293
