当前位置：首页 > news >正文

HarmonyOS 自定义进度条 Stage模型

news 2025/9/18 9:41:48

通过onTouch监听滑动，动态改变圆角

let radius = 0@Entry
@Component
struct TestPage {@State flip: boolean = false@State progress:number = 20build() {Row() {Column() {RelativeContainer(){Rect({ width: '100%', height: 40 }).radius(10).fill("#505050").stroke(Color.Transparent).alignRules({left:{anchor:'__container__',align:HorizontalAlign.Start},center:{anchor:'__container__',align:VerticalAlign.Center}}).id('brightness_back')Rect({ width: `${this.progress}%`, height: 40 }).radius([[10, 10],[radius, radius],[radius, radius],[10, 10]]).fill("#FFFFFF").stroke(Color.Transparent).alignRules({left:{anchor:'__container__',align:HorizontalAlign.Start},center:{anchor:'__container__',align:VerticalAlign.Center}}).id('brightness_progress')Image($r('app.media.brightness')).objectFit(ImageFit.None).width(40).alignRules({left:{anchor:'__container__',align:HorizontalAlign.Start},center:{anchor:'__container__',align:VerticalAlign.Center}}).id('brightness_icon')Text(`${this.progress}%`).fontColor(0x000000).fontSize(14).alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},left:{anchor:'brightness_icon',align:HorizontalAlign.End}}).id('text_brightness')}.width('90%').margin({top:10}).height(40).onTouch((event: TouchEvent) => {let x = event.touches[0].x// @ts-ignorelet width:number = event.target.area.widththis.progress = Math.max(0,Math.min(100,Math.round(x/width * 100)))let length = width - xif( x <= width && length < 10 ){radius = (10 - length)} else if (x > width){radius = 10} else {radius = 0}})}.width('100%')}.backgroundColor(Color.Gray).height('100%')}
}

查看全文

http://www.lryc.cn/news/304242.html