通过onTouch监听滑动,动态改变圆角
let radius = 0 @Entry @Component struct TestPage { @State flip: boolean = false @State progress:number = 20 build() { 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-ignore let width:number = event.target.area.width this.progress = Math.max(0,Math.min(100,Math.round(x/width * 100))) let length = width - x if( x <= width && length < 10 ){ radius = (10 - length) } else if (x > width){ radius = 10 } else { radius = 0 } }) } .width('100%') }.backgroundColor(Color.Gray) .height('100%') } }