在鸿蒙开发中实现自定义进度条
作者：幽蓝计划
- 2025-06-03 山东
本文字数：1728 字
阅读完需：约 6 分钟
前些天发现一个问题，鸿蒙官方的进度条组件 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##工具效率 #
划线
评论
复制
发布于: 刚刚阅读数: 5
版权声明: 本文为 InfoQ 作者【幽蓝计划】的原创文章。
原文链接:【http://xie.infoq.cn/article/7bab6705ccfa9dbdfceab9b98】。未经作者许可，禁止转载。
幽蓝计划
关注
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论