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