本例完整代码如下:
// xxx.ets
@Entry
@Component
struct ChangeVolume{
@State volume:number = 0
@State bright:number = 0
@State fingerPosition:number = 0
build(){
Column(){
// 添加需要呈现的文本
Row(){
if (this.fingerPosition != 0 && this.fingerPosition < 200){
Text('左侧滑动')
.fontColor('#FD836E')
.fontSize(20)
.textAlign(TextAlign.Start)
.width('85%')
}
if (this.fingerPosition != 0 && this.fingerPosition > 200){
Text('右侧滑动')
.fontColor('#0AAF88')
.fontSize(20)
.textAlign(TextAlign.End)
.align(Alignment.End)
.width('100%')
}
}
.width('90%')
.height('50%')
.alignItems(VerticalAlign.Bottom)
Stack(){
// 亮度调节UI
if (this.fingerPosition != 0 && this.fingerPosition < 200){
Image($r('app.media.ic_brightness'))
.width(100)
.aspectRatio(1.0)
Progress({value:this.bright,type:ProgressType.Ring})
.color('#FD836E')
.width(105)
.aspectRatio(1.0)
// 音量调节UI
}else if (this.fingerPosition != 0 && this.fingerPosition > 200){
Image($r('app.media.ic_volume'))
.width(100)
.aspectRatio(1.0)
Progress({value:this.volume,type:ProgressType.Ring})
.color('#0AAF88')
.width(105)
.aspectRatio(1.0)
}
}
.width('100%')
.height('40%')
}
.width('100%')
.height('100%')
.gesture(
GestureGroup(GestureMode.Exclusive,
// 添加触摸手势,并通过direction控制手势滑动方向为上下滑动
PanGesture({direction:PanDirection.Vertical})
.onActionUpdate((event?:GestureEvent)=>{
// 通过event.fingerList[0].localX获取触摸点的横坐标
this.fingerPosition = event.fingerList[0].localX
// 向上滑动
if (event.offsetY < 0){
// 触摸点在屏幕右侧
if (this.volume < 100 && this.fingerPosition > 200){
// 音量值增加
this.volume += 1
}
// 触摸点在屏幕左侧
if (this.bright < 100 && this.fingerPosition < 200){
// 亮度值增加
this.bright += 1
}
// 向下滑动
}else{
// 触摸点在屏幕右侧
if (this.volume > 0 && this.fingerPosition > 200){
// 音量值减小
this.volume -= 1
}
// 触摸点在屏幕左侧
if (this.bright > 0 && this.fingerPosition < 200){
// 亮度值减小
this.bright -= 1
}
}
}),
)
)
}
}