HarmonyOS 播放条支持自定义多种类型

@Entry 
@Component 
struct MusicPage { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  @State vipMin: number = 20 
  @State vipMax: number = 40 
  @State curr: number = 30 
 
  build() { 
    Stack() { 
      Canvas(this.context) 
        .width(40) 
        .height(18) 
        .backgroundColor('#0000') 
        .onReady(() => { 
          this.context.fillStyle = '#ff3c3c3c' 
          this.context.globalAlpha = 1.0 
          this.context.lineCap = 'round' 
          this.context.fillRect(0, 0, 10, 16) 
          this.context.fillRect(28, 0, 10, 16) 
        }) 
      Column(){ 
        Row() { 
          Slider({ 
            value: this.curr, 
            min: 0, 
            max: 100, 
            style: SliderStyle.InSet 
          }).showTips(false).trackColor('#50857f7f') 
            .selectedColor('#ffe3aaaa') 
        }.width('80%').height(20) 
        Row() { 
          Progress({ value: 0, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width('72%') 
        } 
      } 
    }.margin({ top: 150 }) 
  } 
}