Implement a custom progress bar in HarmonyOS development

A few days ago, I discovered a problem. Although the official Progress bar component of HarmonyOS, Progress, offers relatively rich functions, sometimes it still fails to meet the development needs.

For instance, sometimes I need to have a dot on the Progress bar to control the progress. Progress doesn't offer this style, so today I'll share with you the implementation process of a custom progress bar.

Here, I use a cascading layout, layering the total length part of black and the white part. The straight lines and dots in the white part are arranged horizontally. When the progress changes, only the length of the white straight line part needs to be modified, and the dots will automatically follow and move.

Then add a drag gesture to the dot. In this way, a progress bar with dots is completed. It's quite simple. Just paste the complete encapsulated code below:

import { componentUtils } from "@kit.ArkUI"
@Component export struct yl_progress{
  @Prop total:number = 0
  @Prop @Watch('valueChangeAction') value:number = 0
  valueChange:(value:number)=>void=()=>{}
  @State private  progressWidth:number = 200
  @State private  positionX:number = 0
  @State private offsetX: number = 0;
  @State private paning: boolean = false;
  valueChangeAction(){
    this.positionX =  this.progressWidth *this.value/this.total
    if(this.positionX >= this.progressWidth){
      this.positionX = this.progressWidth
    }
    if(this.positionX <= 0){
      this.positionX = 0
    }
  }
  aboutToAppear(): void {
    setTimeout(()=>{
      this.progressWidth = px2vp(componentUtils.getRectangleById('ylprogress').size.width)
      this.positionX =  this.progressWidth *this.value/this.total
    },20)
 }
  build() {
    Stack({alignContent:Alignment.Start}){
      Row(){
      }
      .width('100%')
      .height(4)
      .borderRadius(2)
      .backgroundColor(Color.Black)
      .opacity(0.5)
      Row(){
        Row()
          .width(this.paning?this.offsetX:this.positionX)
          .height(4)
          .borderRadius(2)
          .backgroundColor(Color.White)
        Row(){
        }
        .width(15)
        .height(15)
        .borderRadius(7.5)
        .backgroundColor(Color.White)
        .margin({left:-7})
        .gesture(
          // 绑定拖动手势
          PanGesture()
            .onActionStart((event: GestureEvent|undefined) => {
              console.info('Pan start');
              this.paning = true
            })
              // 当触发拖动手势时，根据回调函数修改组件的布局位置信息
            .onActionUpdate((event: GestureEvent|undefined) => {
              if(event){
                this.offsetX = this.positionX + event.offsetX;
                if(this.offsetX >= this.progressWidth){
                  this.offsetX = this.progressWidth
                }
                if(this.offsetX <= 0){
                  this.offsetX = 0
                }
                let rate = this.offsetX/this.progressWidth
                let currentValue = Math.round(this.total* rate)
                this.valueChange(currentValue)
              }
            })
            .onActionEnd(() => {
              this.paning = false
              this.positionX = this.offsetX;
              if(this.positionX >= this.progressWidth){
                this.positionX = this.progressWidth
              }
              if(this.positionX <= 0){
                this.positionX = 0
              }
              this.value = Math.round(this.total*this.positionX/this.progressWidth)
              this.valueChange(this.value)
            })
        )
      }
    }
    .id('ylprogress')
    .height(15)
    .width(this.progressWidth)
  }
}  

When in use:

yl_progress({total:100,value:40,valueChange:(value)=>{
  console.log('进度条拖拽事件:',value);
  }
 })
 .margin({top:100})

That's all for today. Thank you for reading. #HarmonyOS Language ##ArkTS## Tool Efficiency #