在鸿蒙开发中实现自定义进度条

前些天发现一个问题，鸿蒙官方的进度条组件Progress虽然提供了比较丰富的功能，但是有时候还是不能满足开发的需要。

比如有时候我需要在进度条上有个圆点来控制进度，Progress就没有提供这种样式，所以今天就跟大家分享一下自定义进度条的实现过程。

这里我使用层叠布局，将黑色的总长度部分和白色部分进行层叠，白色部分的直线和圆点使用横向布局，当进度变化时只需要修改白色直线部分的长度，圆点会自动跟随移动。

然后给圆点添加拖动手势，这样一个带圆点的进度条就完成了，比较简单，直接把封装好的完整代码贴在下面：

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)
  }
}

使用的时候:

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

以上就是今天的内容，感谢阅读。#HarmonyOS语言##ArkTS##工具效率#