前些天发现一个问题，鸿蒙官方的进度条组件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.totalthis.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})
.margin({top:100})
