目录

• 说些废话
• 环境
• 代码
• • PinchGesture（捏合手势）
  • RotationGesture（旋转手势）
  • SwipeGesture（滑动手势）
  • • index.ets
    • show.ets
    • page.ets
  • GestureGroup（组合手势）

说些废话

    官方文档：手势处理（基于ArkTS的声明式开发范式）
    我只写了几个，而且我是一个工程测试一个手势，所以就只贴一下.ets的代码了，注释也没写而且都是用的API 8（FA），创建的华为鸿蒙工程。

环境

    HUAWEI MatePad Pro 10.8英寸 2019款 HarmonyOS3.0.0.163
    DevEco Studio 3.1 Canary1
    SDK 8
    我看的《API参考》更新时间为2022-12-16 17:46

代码

PinchGesture（捏合手势）

import prompt from '@system.prompt';@Entry@Componentstruct Index {  //捏合形成的比例  @State scaleValue: number = 1;  //图片的宽高  @State image_width: number = 100;  @State image_height: number = 100;  build() {    Row() {      Column() { Image($r('app.media.windmill'))   //最大就变成300叭   .width(this.image_width)   .height(this.image_height)      }      .width('100%')    }    .height('100%')    .gesture(      PinchGesture({ fingers: 2 }) .onActionStart((event: GestureEvent) => {//   prompt.showToast({//     message: 'onActionStart'//   }) }) .onActionUpdate((event: GestureEvent) => {   this.image_width *= event.scale   if(this.image_width > 300){     this.image_width = 300   }   if(this.image_width < 100){     this.image_width = 100   }   this.image_height = this.image_width//   prompt.showToast({//     message: 'event = ' + JSON.stringify(event)//   }) }) .onActionEnd(() => {//   prompt.showToast({//     message: 'onActionEnd'//   }) })    )  }}

RotationGesture（旋转手势）

@Entry@Componentstruct Index {  @State image_angle: number = 0  //0度和360度的时候z是1  build() {    Row() {      Column() { Image($r('app.media.windmill'))   .width(200)   .height(200)   .rotate({// 组件以(0, 0, 1)为旋转轴，中心点顺时针旋转angle度x: 0,y: 0,//有bug，转完之后再去转的时候，又是以最初的图片位置开始转的z: 1,angle: this.image_angle,centerX: '50%',centerY: '50%'     }   )      }      .width('100%')    }    .height('100%')    .gesture(      RotationGesture({fingers: 2}) .onActionStart((event: GestureEvent) => { }) .onActionUpdate((event: GestureEvent) => {   this.image_angle = event.angle; }) .onActionEnd(() => { })    )  }}

SwipeGesture（滑动手势）

index.ets

import prompt from '@system.prompt';import featureAbility from '@ohos.ability.featureAbility';@Entry@Componentstruct Index {  @State message: string = 'Page1'  build() {    Row() {      Column() { Text(this.message)   .fontSize(50)   .fontWeight(FontWeight.Bold)      }      .width('100%')    }    .gesture(      SwipeGesture({ //触发滑动手势的滑动方向为水平方向。 direction: SwipeDirection.Horizontal, fingers: 1, speed: 50      }) //滑动手势识别成功回调。 .onAction(event => {   //angle是负的就是从左往右滑   if(event.angle > 0){     //从右往左滑     featureAbility.startAbility({want: {  deviceId: '',  bundleName: 'com.openvalley.cyj.gesture.swipe',  abilityName: 'com.openvalley.cyj.gesture.swipe.MainAbility',  parameters: {    url: 'pages/show'  }}     })   }else{     //从左往右滑     prompt.showToast({message: '当前已经是第一页。'     })   } })    )    .height('100%')  }}

show.ets

import prompt from '@system.prompt';import featureAbility from '@ohos.ability.featureAbility';@Entry@Componentstruct Show {  @State message: string = 'Page2'  build() {    Row() {      Column() { Text(this.message)   .fontSize(50)   .fontWeight(FontWeight.Bold)      }      .width('100%')    }    .gesture(    SwipeGesture({      //触发滑动手势的滑动方向为水平方向。      direction: SwipeDirection.Horizontal,      fingers: 1,      speed: 50    })      //滑动手势识别成功回调。      .onAction(event => { //angle是负的就是从左往右滑 if(event.angle > 0){   //从右往左滑   featureAbility.startAbility({     want: {deviceId: '',bundleName: 'com.openvalley.cyj.gesture.swipe',abilityName: 'com.openvalley.cyj.gesture.swipe.MainAbility',parameters: {  url: 'pages/page'}     }   }) }else{   //从左往右滑   featureAbility.startAbility({     want: {deviceId: '',bundleName: 'com.openvalley.cyj.gesture.swipe',abilityName: 'com.openvalley.cyj.gesture.swipe.MainAbility',parameters: {  url: 'pages/index'}     }   }) }      })    )    .height('100%')  }}

page.ets

import prompt from '@system.prompt';import featureAbility from '@ohos.ability.featureAbility';@Entry@Componentstruct Page {  @State message: string = 'Page3'  build() {    Row() {      Column() { Text(this.message)   .fontSize(50)   .fontWeight(FontWeight.Bold)      }      .width('100%')    }    .gesture(    SwipeGesture({      //触发滑动手势的滑动方向为水平方向。      direction: SwipeDirection.Horizontal,      fingers: 1,      speed: 50    })      //滑动手势识别成功回调。      .onAction(event => { //angle是负的就是从左往右滑 if(event.angle > 0){   //从右往左滑   prompt.showToast({     message: '当前已经是最后一页。'   }) }else{   //从左往右滑   featureAbility.startAbility({     want: {deviceId: '',bundleName: 'com.openvalley.cyj.gesture.swipe',abilityName: 'com.openvalley.cyj.gesture.swipe.MainAbility',parameters: {  url: 'pages/show'}     }   }) }      })    )    .height('100%')  }}

GestureGroup（组合手势）

    我这里写（cv）的是旋转+捏合。

@Entry@Componentstruct Index {  //捏合形成的比例  @State scaleValue: number = 1;  //图片的宽高  @State image_width: number = 100;  @State image_height: number = 100;  //旋转的角度  @State image_angle: number = 0  @State message: string = 'Hello World'  build() {    Row() {      Column() { Image($r('app.media.windmill'))   .width(this.image_width)   .height(this.image_height)   .rotate({     // 组件以(0, 0, 1)为旋转轴，中心点顺时针旋转angle度     x: 0,     y: 0,     //有bug，转完之后再去转的时候，又是以最初的图片位置开始转的     z: 1,     angle: this.image_angle,     centerX: '50%',     centerY: '50%'   }   )      }      .width('100%')    }    .gesture(      GestureGroup( //并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 GestureMode.Parallel, RotationGesture({fingers: 2})   .onActionUpdate((event: GestureEvent) => {     this.image_angle = event.angle;   }) , PinchGesture({ fingers: 2 })   .onActionUpdate((event: GestureEvent) => {     this.image_width *= event.scale     if(this.image_width > 500){this.image_width = 500     }     if(this.image_width < 100){this.image_width = 100     }     this.image_height = this.image_width   })      )    )    .height('100%')  }}