OpenHarmony进度条如何定制主题

OpenHarmony进度条定制主题的实现方法

OpenHarmony中，进度条（Progress）组件的主题定制主要通过内置样式属性配置和自定义组件扩展两种方式实现，覆盖颜色、尺寸、形状、动画等多个维度的个性化需求。

一、内置样式属性配置（快速定制）

OpenHarmony的Progress组件提供了丰富的属性，可直接在组件的链式调用中设置，无需额外创建组件，适用于大多数基础定制场景。

1. 基础属性设置
   • 进度值与总长度：通过value（当前进度，0~total之间）和total（进度总长，默认100）控制进度显示范围。
   • 样式类型：通过type属性选择进度条样式，支持ProgressType.Linear（线性，默认，自适应方向）、ProgressType.Ring（环形无刻度）、ProgressType.ScaleRing（环形有刻度）、ProgressType.Eclipse（圆形）、ProgressType.Capsule（胶囊）5种类型。
     示例：

   // 线性进度条（默认水平，高度>宽度时垂直）
   Progress({ value: 30, total: 100, type: ProgressType.Linear })
     .width(200)
     .height(30)
   // 环形无刻度进度条
   Progress({ value: 50, total: 100, type: ProgressType.Ring })
     .width(80)
     .height(80)
   

2. 颜色与尺寸定制
   • 前景色（进度条颜色）：通过color()方法设置，支持单色（如Color.Blue）或渐变色（LinearGradient）。
   • 背景色：通过backgroundColor()方法设置（仅线性样式支持）。
   • 尺寸与圆角：线性样式通过style()方法设置strokeWidth（宽度）和strokeRadius（圆角半径）；环形样式通过style()设置strokeWidth（环宽）。
     示例：

   // 线性进度条（橙色渐变、圆角）
   Progress({ value: 40, total: 150, type: ProgressType.Linear })
     .style({ strokeWidth: 8, strokeRadius: 4 }) // 圆角宽度
     .color(new LinearGradient([{ color: "#FFA500", offset: 0 }, { color: "#FF4500", offset: 1 }])))
   // 环形进度条（红色、带阴影）
   Progress({ value: 60, total: 100, type: ProgressType.Ring })
     .style({ strokeWidth: 10, shadow: true }) // 环宽+阴影
     .color(Color.Red)
   

3. 特殊样式扩展
   • 胶囊样式：ProgressType.Capsule支持设置边框（borderColor、borderWidth）和内容文案（content、font）。
   • 环形刻度：ProgressType.ScaleRing通过style()设置scaleCount（总刻度数）和scaleWidth（刻度线宽度）。
     示例：

   // 胶囊样式进度条（带边框和文案）
   Progress({ value: 70, total: 100, type: ProgressType.Capsule })
     .style({ borderColor: "#33007dff", borderWidth: 4, content: "70%", font: { size: 12 } })
   // 环形刻度进度条（5个刻度）
   Progress({ value: 80, total: 100, type: ProgressType.ScaleRing })
     .style({ scaleCount: 5, scaleWidth: 3 }) // 5个刻度线
   

二、自定义组件扩展（深度定制）

若内置属性无法满足需求（如完全自定义形状、动画逻辑），可通过继承Progress组件或创建自定义组件实现，适用于高级定制场景。

1. 继承Progress组件
   继承Progress类，重写onDraw()方法，通过Canvas对象自定义绘制逻辑（如修改进度条形状、添加额外元素）。需通过TypedArray解析自定义属性（如颜色、尺寸），并在初始化时应用。
   示例（简化版）：

   export default class CustomProgressBar extends Progress {
     private progressColor: string = Color.Blue;
     private backgroundColor: string = Color.Gray;
     
     constructor(context: Context, attrs?: AttributeSet, defStyleAttr?: number) {
       super(context, attrs, defStyleAttr);
       this.init(attrs, defStyleAttr);
     }
     
     private init(attrs: AttributeSet | undefined, defStyleAttr: number) {
       const a = this.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyleAttr, 0);
       this.progressColor = a.getColor(R.styleable.CustomProgressBar_progressColor, Color.Blue);
       this.backgroundColor = a.getColor(R.styleable.CustomProgressBar_backgroundColor, Color.Gray);
       a.recycle();
       // 设置进度条颜色（组合前景色与背景色）
       this.setProgressDrawable(new GradientDrawable(Orientation.LEFT_RIGHT, [this.backgroundColor, this.progressColor]));
     }
     
     // 重写onDraw方法实现自定义绘制（可选）
     @Override
     protected synchronized void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       // 添加自定义绘制逻辑（如绘制边框、图标等）
     }
   }
   

2. 使用@Styles与@Extend复用样式
   通过@Styles装饰器定义可复用的样式（如进度条尺寸、颜色），通过@Extend装饰器扩展原生组件的私有属性（如渐变色的偏移量），提升代码复用性。
   示例：

   // 全局样式定义
   @Styles function baseProgress() {
     .width(200)
     .height(30)
     .strokeWidth(8)
     .strokeRadius(4)
   }
   
   @Extend(Text) function progressText() {
     .fontSize(12)
     .fontColor(Color.White)
   }
   
   @Entry
   @Component
   struct CustomProgressPage {
     build() {
       Column() {
         // 使用全局样式
         Progress({ value: 50, total: 100, type: ProgressType.Linear })
           .baseProgress()
           .color(new LinearGradient([{ color: "#00FF00", offset: 0 }, { color: "#00AA00", offset: 1 }])))
           .content("50%") // 配合@Extend的Text样式
           .font({ size: 12 })
       }
     }
   }
   

注意事项

• 渐变色支持：仅ProgressType.Linear和ProgressType.Ring支持渐变色，需通过LinearGradient或SweepGradient创建。
• 状态样式：若需根据进度状态（如完成、暂停）改变样式，可通过stateStyles属性设置不同状态下的样式（如pressed、disabled）。
• 性能优化：自定义绘制逻辑（如onDraw）需避免频繁操作Canvas，减少不必要的重绘。

通过上述方法，可实现OpenHarmony进度条的主题定制，满足不同场景的设计需求。