通过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%')
}
}