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

前些天发现一个问题，鸿蒙官方的进度条组件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##工具效率#