HarmonyOS 6 LoadingProgress 组件使用示例文档

文章目录组件基础1. 组件定义2. 核心能力核心API1. 组件接口2. 核心属性3. 关键类型定义完整代码示例1. 依赖导入2. 自定义内容修饰器3. 自定义布局构建器4. 主页面组件功能效果说明总结组件基础1. 组件定义LoadingProgress是HarmonyOS提供的加载进度指示器组件用于展示应用加载、数据请求、任务处理等场景的等待状态支持自定义尺寸、颜色、内容样式是UI交互中常用的状态提示组件。2. 核心能力支持基础样式配置颜色、尺寸支持ContentModifier自定义内容修饰实现复杂布局嵌套支持动态切换配置参数实时更新UI展示支持与Button、Gauge、List、Circle等多组件联动渲染核心API1. 组件接口LoadingProgress()无入参创建基础加载进度组件实例。2. 核心属性属性名类型作用colorResourceColor设置加载进度指示器的颜色sizeSizeOptions设置组件的宽高尺寸contentModifierContentModifier自定义内容修饰器替换/扩展组件默认内容3. 关键类型定义ContentModifierT内容修饰器接口需实现applyContent方法返回自定义构建器LoadingProgressConfigurationLoadingProgress组件的配置参数类型用于传递自定义数据WrappedBuilder包装构建器类型用于绑定自定义Builder函数完整代码示例1. 依赖导入// xxx.etsimport{UIContext}fromkit.ArkUI;导入UIContext用于组件上下文交互如Toast弹窗。2. 自定义内容修饰器MyLoadingProgressStyle实现ContentModifierLoadingProgressConfiguration接口用于传递动态配置和UI上下文classMyLoadingProgressStyleimplementsContentModifierLoadingProgressConfiguration{enableLoading:booleanfalse;// 动态控制样式的开关ctx:UIContext|undefinedundefined;// UI上下文// 构造函数初始化配置和上下文constructor(enableLoading:boolean,ctx:UIContext){this.enableLoadingenableLoading;this.ctxctx;}// 实现接口方法绑定自定义构建器applyContent():WrappedBuilder[LoadingProgressConfiguration]{returnwrapBuilder(buildLoadingProgress);}}作用将自定义数据enableLoading和UI上下文传递给自定义构建器实现动态样式控制核心方法applyContent必须返回wrapBuilder包装后的自定义Builder函数3. 自定义布局构建器使用Builder装饰器定义buildLoadingProgress嵌套Circle、Button、Gauge、List等组件通过修饰器配置动态控制样式// 数据源letarr1:string[][0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];letarr2:string[][0,1,2,3,4,5,6,7,8,9];// 自定义LoadingProgress内容布局BuilderfunctionbuildLoadingProgress(config:LoadingProgressConfiguration){Column({space:8}){// 1. 圆形按钮行布局Row(){// 动态尺寸/颜色的圆形组件Column(){Circle({width:((config.contentModifierasMyLoadingProgressStyle).enableLoading)?100:80,height:((config.contentModifierasMyLoadingProgressStyle).enableLoading)?100:80}).fill(((config.contentModifierasMyLoadingProgressStyle).enableLoading)?Color.Grey:0x2577e3)}.width(50%)// 带点击事件的按钮Column(){Button(((config.contentModifierasMyLoadingProgressStyle).enableLoading)).onClick((event:ClickEvent){letuiContext(config.contentModifierasMyLoadingProgressStyle).ctx;if(uiContext){// 弹出当前配置状态uiContext.getPromptAction().showToast({message:((config.contentModifierasMyLoadingProgressStyle).enableLoading)});}}).fontColor(Color.White).backgroundColor(((config.contentModifierasMyLoadingProgressStyle).enableLoading)?Color.Grey:0x2577e3)}.width(50%)}// 2. 仪表盘(Gauge)布局Row(){Column(){Gauge({value:(config.contentModifierasMyLoadingProgressStyle).enableLoading?50:30,min:11,max:100}){Column(){Text(60).maxFontSize(180sp).minFontSize(160.0vp).fontWeight(FontWeight.Medium).fontColor(#ff182431).width(40%).height(30%).textAlign(TextAlign.Center).margin({top:22.2%}).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1)}.width(100%).height(100%)}.colors(((config.contentModifierasMyLoadingProgressStyle).enableLoading)?Color.Grey:0x2577e3).width(200).strokeWidth(18).padding(5).trackShadow({radius:7,offsetX:7,offsetY:7}).height(200)}.width(100%)}// 3. 网格列表(List)布局Column(){List({space:20,initialIndex:0}){ForEach(arr2,(item:string){ListItem(){Text((config.contentModifierasMyLoadingProgressStyle).enableLoading?item:Number(item)*2).width(100%).height(100%).fontColor((config.contentModifierasMyLoadingProgressStyle).enableLoading?Color.White:Color.Orange).fontSize((config.contentModifierasMyLoadingProgressStyle).enableLoading?16:20).textAlign(TextAlign.Center).backgroundColor((config.contentModifierasMyLoadingProgressStyle).enableLoading?Color.Grey:0x2577e3)}.height(110).border({width:2,color:Color.White})},(item:string)item)}.height(200).width(100%).friction(0.6)// 动态控制列表网格列宽.lanes({minLength:(config.contentModifierasMyLoadingProgressStyle).enableLoading?40:80,maxLength:(config.contentModifierasMyLoadingProgressStyle).enableLoading?40:80}).scrollBar(BarState.Off)}}.width(100%).padding(10)}核心逻辑通过config.contentModifier获取自定义修饰器的enableLoading参数动态控制所有子组件的尺寸、颜色、文本、布局交互能力Button绑定点击事件通过UIContext弹出Toast提示当前配置状态4. 主页面组件实现配置动态切换、滚动布局、按钮交互EntryComponentstruct LoadingProgressDemoExample{// 动态配置数组包含undefined、true、null、false四种状态StateloadingProgressList:(boolean|undefined|null)[][undefined,true,null,false];StatewidthList:(number|string)[][110%,220,40%,80];StateloadingProgressIndex:number0;// 当前配置索引StateclickFlag:number0;// 点击计数scroller:ScrollernewScroller();// 滚动控制器build(){Column(){// 滚动容器Scroll(this.scroller){Column({space:5}){Column(){// LoadingProgress核心调用LoadingProgress().color(#106836)// 基础颜色.size({width:100%})// 基础尺寸// 绑定自定义修饰器传递当前配置UI上下文.contentModifier(newMyLoadingProgressStyle(this.loadingProgressList[this.loadingProgressIndex],this.getUIContext()))}.width(100%).backgroundColor(0xdcdcdc)}.width(100%).margin({top:5})}.height(85%)// 切换配置按钮Button(点击切换config.enableloading).onClick((){this.clickFlag;// 循环切换配置索引this.loadingProgressIndex(this.loadingProgressIndex1)%this.loadingProgressList.length;console.info(enableLoading:this.loadingProgressList[this.loadingProgressIndex]);}).margin(20)}}}动态切换点击按钮循环切换loadingProgressList中的四种状态实时更新LoadingProgress的自定义样式上下文传递通过this.getUIContext()获取当前UI上下文传递给修饰器功能效果说明基础样式LoadingProgress默认设置绿色背景宽度铺满屏幕动态样式切换enableLoadingtrue子组件为灰色、小尺寸、列表单列、文本显示原始数字enableLoadingfalse子组件为蓝色、大尺寸、列表双列、文本显示数字×2undefined/null兼容空值状态UI正常渲染交互功能点击Button弹出当前enableLoading的状态值布局能力嵌套滚动布局、多组件组合适配复杂页面场景运行效果如图总结LoadingProgress组件不仅支持基础样式配置通过ContentModifier自定义修饰器可实现高度灵活的复杂布局结合动态配置切换能满足HarmonyOS应用中各类加载状态的UI需求。本文档示例代码可直接复制运行是HarmonyOS 6中LoadingProgress组件的最佳实践参考。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力