HarmonyOS 6 Progress组件设置定制内容区使用文档

文章目录功能概述核心 API1. 接口定义2. 关键类型完整示例代码结构与功能1. 自定义修饰器类MyProgressModifier2. 自定义内容构建器myProgress3. 页面组件Index核心特性1. 进度联动2. 样式定制3. 状态感知4. 完全替换原生内容总结功能概述contentModifier是 HarmonyOS 6 Progress 组件提供的内容定制接口用于完全自定义进度条内部展示区域。可通过该接口替换进度条默认显示内容实现自定义文本展示自定义图标/图形进度联动的动态样式多元素组合布局核心 API1. 接口定义contentModifier(modifier:ContentModifierProgressConfiguration):Progress2. 关键类型ContentModifier内容修饰器基类用于定义自定义内容ProgressConfiguration进度条配置信息包含value当前进度值total总进度值enabled进度条是否可用contentModifier绑定的修饰器实例完整示例// xxx.ets class MyProgressModifier implements ContentModifierProgressConfiguration { color: ResourceColor Color.White; constructor(color: ResourceColor) { this.color color; } applyContent(): WrappedBuilder[ProgressConfiguration] { return wrapBuilder(myProgress); } } Builder function myProgress(config: ProgressConfiguration) { Column({ space: 30 }) { Text(当前进度 config.value / config.total).fontSize(20) Row() { Flex({ justifyContent: FlexAlign.SpaceBetween }) { Path() .width(30%) .height(30%) .commands(M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z) .fill(config.enabled config.value 1 ? (config.contentModifier as MyProgressModifier).color : Color.White) .stroke(Color.Black) .strokeWidth(3) Path() .width(30%) .height(30%) .commands(M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z) .fill(config.enabled config.value 2 ? (config.contentModifier as MyProgressModifier).color : Color.White) .stroke(Color.Black) .strokeWidth(3) Path() .width(30%) .height(30%) .commands(M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z) .fill(config.enabled config.value 3 ? (config.contentModifier as MyProgressModifier).color : Color.White) .stroke(Color.Black) .strokeWidth(3) }.width(100%) } }.margin({ bottom: 100 }) } Entry Component struct Index { State currentValue: number 0; modifier new MyProgressModifier(rgb(39, 135, 217)); State myModifier: (MyProgressModifier | undefined) this.modifier; build() { Column() { Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring }).contentModifier(this.modifier) Button(Progress).onClick(() { if (this.currentValue 3) { this.currentValue 1; } }).width(30%) Button(Progress--).onClick(() { if (this.currentValue 0) { this.currentValue - 1; } }).width(30%).margin(10) }.width(100%).height(100%) } }运行效果如图当点击Process–按钮代码结构与功能1. 自定义修饰器类MyProgressModifier实现ContentModifierProgressConfiguration接口支持传入自定义颜色参数通过applyContent()返回自定义 UI 构建器2. 自定义内容构建器myProgress接收ProgressConfiguration进度配置显示当前进度文本config.value / config.total绘制3 个星形 Path 图标根据进度值动态变色进度 ≥1 / ≥2 / ≥3 时分别点亮对应星星3. 页面组件Index维护进度值currentValue0~3创建修饰器实例并传入自定义颜色环形进度条绑定contentModifier提供 /- 按钮控制进度核心特性1. 进度联动通过config.value可直接获取当前进度实现内容随进度自动更新。2. 样式定制可在修饰器中自定义文本、颜色、字体图形、图标、路径布局、间距、对齐3. 状态感知可通过config.enabled判断进度条是否可用实现可用/不可用状态切换。4. 完全替换原生内容使用contentModifier后原生百分比文本自动隐藏完全展示自定义内容。总结仅支持带内容区的进度条主要为ProgressType.Ring环形必须实现接口修饰器必须实现ContentModifierProgressConfiguration构建器参数必传Builder必须接收ProgressConfiguration参数类型强转使用修饰器自定义属性需as强转为自定义类自动刷新进度值变化时自定义内容会自动刷新如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力