HarmonyOS 一个控件要识别滑动和拖动怎么写组合手势 滑动怎么判断方向

一个控件监听手势,滑动的时候 直接操作 ,拖动的时候 按照拖动的距离 将控件进行移位。

HarmonyOS
2024-12-20 16:29:31
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

参考demo如下:

// xxx.ets
@Entry
@Component
struct Index {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State count: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;
  @State borderStyles: BorderStyle = BorderStyle.Solid
  build() {
    Column() {
      Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(28)
    }
    // 绑定translate属性可以实现组件的位置移动
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
    .height(250)
    .width(300)
    //以下组合手势为顺序识别,当长按手势事件未正常触发时不会触发拖动手势事件
    .gesture(
      // 声明该组合手势的类型为Sequence类型
      GestureGroup(GestureMode.Sequence,
        // 该组合手势第一个触发的手势为长按手势,且长按手势可多次响应
        LongPressGesture({ repeat: true })
          // 当长按手势识别成功,增加Text组件上显示的count次数
          .onAction((event: GestureEvent|undefined) => {
            if(event){
              if (event.repeat) {
                this.count++;
              }
            }
            console.info('LongPress onAction');
          })
          .onActionEnd(() => {
            console.info('LongPress end');
          }),
        // 当长按之后进行拖动,PanGesture手势被触发
        PanGesture()
          .onActionStart(() => {
            this.borderStyles = BorderStyle.Dashed;
            console.info('pan start');
          })
            // 当该手势被触发时,根据回调获得拖动的距离,修改该组件的位移距离从而实现组件的移动
          .onActionUpdate((event: GestureEvent|undefined) => {
            if(event){
              this.offsetX = this.positionX + event.offsetX;
              this.offsetY = this.positionY + event.offsetY;
            }
            console.info('pan update');
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX;
            this.positionY = this.offsetY;
            this.borderStyles = BorderStyle.Solid;
          })
      )
    )
  }
}
分享
微博
QQ
微信
回复
2024-12-20 19:11:21
相关问题
HarmonyOS 如何判断滑动方向
193浏览 • 1回复 待解决
onTouch事件是否可以判断滑动方向
2396浏览 • 1回复 待解决
周日历滑动,以周为一个单位滑动
1192浏览 • 1回复 待解决
怎么判断一个类型是stirng
1293浏览 • 1回复 待解决
求教一个sql语句里传参怎么
3842浏览 • 1回复 待解决
鸿蒙的promise怎么
7987浏览 • 3回复 待解决
HarmonyOS 图片组件手势滑动
277浏览 • 1回复 待解决