【木棉花】学习笔记——ArkUI手势处理（eTS）原创精华

木棉花沈泳鑫

发布于 2022-1-30 22:26

1.4w浏览

2收藏

加载失败

前言

在应用中，我们可以用点击、双击、长按等等的方式去操作一个应用，那这些点击、双击、长按就是我们所说的手势处理。当然手势处理也不仅仅是只有这三种，而且我们还可以将这些基础手势组合起来成为一个组合手势。

正文

TapGesture

这是一个点击手势，支持单次点击和多次点击。

参数名称	默认值	参数描述
count?:number	1	识别的连续点击次数。
fingers?:number	1	触发点击的最少手指数，最小为1指，最大为10指。

而在该点击手势中，只有一个事件回调函数，那就是onAction((event?: GestureEvent) => void)，当手势识别成功时回调该函数。

      Text('请双击')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .gesture(
          TapGesture({count:2})
            .onAction(()=>{
              console.info('TapGesture回调成功')
            })
        )
1.
2.
3.
4.
5.
6.
7.
8.
9.

双击文本之后呢，就会在输出控制台输出 TapGesture回调成功这样子的一句提示。

LongPressGesture

LongPressGesture是一个长按手势。

参数名称	默认值	参数描述
fingers?:number	1	触发长按的最少手指数，最小为1指，最大取值为10指。
repeat?:boolean	false	是否连续触发事件回调。
duration?:number	500	最小触发长按的时间，单位为毫秒（ms）。

在长按手势中的回调函数就比较多一些了。

回调函数	功能藐视
onAction((event?: GestureEvent) => void)	手势识别成功回调。
onActionEnd((event?: GestureEvent) => void)	手势识别成功，手指抬起后触发回调。
onActionCancel(event: () => void)	手势识别成功，接收到触摸取消事件触发回调。

我们可以根据这个手势来写一个text来记录长按文本的一个时间

      Text('长按了'+this.presstime.toString()+'ms')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .gesture(
          LongPressGesture({repeat:true,duration:100})
            .onAction(()=>{
              this.presstime+=100
            })
            .onActionEnd(()=>{
              this.presstime = 0
              console.info("手指抬起")
            })
            .onActionCancel(()=>{
              console.info('事件取消')
            })
        )
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

PanGesture

PanGesture是一个平移手势。

参数名称	默认值	参数描述
fingers?:number	1	触发长按的最少手指数，最小为1指，最大取值为10指。
direction?:PanDirection	All	设置滑动方向，此枚举值支持逻辑与和逻辑或运算。
distance?:number	5.0	最小滑动识别距离，单位为vp。

回调函数	功能藐视
onActionStart((event?: GestureEvent) => void)	手势识别成功回调。
onActionUpdate((event?: GestureEvent) => void)	手势移动过程中回调。
onActionEnd((event?: GestureEvent) => void)	Pan手势识别成功，手指抬起后触发回调。
onActionCancel(event: () => void)	手势识别成功，接收到触摸取消事件触发回调。

根据可平移手势，我们就可以做出来一个可以平移的文本。

Text('可平移文本')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .translate({x:this.offsetX,y:this.offsetY})
        .gesture(
          PanGesture({direction:(PanDirection.Horizontal|PanDirection.Vertical)})
            .onActionStart(()=>{
              console.info('pan start')
            })
            .onActionUpdate((event:GestureEvent)=>{
              this.offsetX = event.offsetX
              this.offsetY = event.offsetY
            })
            .onActionEnd(()=>{
              this.offsetX = 0
              this.offsetY = 0
            })
        )
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

我在上面平移手势中是设置可以水平或者是竖直平移，和设置任何方向都可以平移是相似的。

PinchGesture

PinchGesture是一个捏合手势。在这个捏合手势中，我们就可以去利用捏合手势去改变一张图片或者其他组件的大小。

参数名称	默认值	参数描述
fingers?:number	2	触发捏合的最少手指数, 最小为2指，最大为5指。
distance?:number	3.0	最小识别距离，单位为vp。

回调函数	功能藐视
onActionStart((event?: GestureEvent) => void)	手势识别成功回调。
onActionUpdate((event?: GestureEvent) => void)	手势移动过程中回调。
onActionEnd((event?: GestureEvent) => void)	Pinch手势识别成功，手指抬起后触发回调。
onActionCancel(event: () => void)	手势识别成功，接收到触摸取消事件触发回调。

那我们就写一个程序去通过捏合手势去放大或者缩小PinchGesture这个文本。

Text('PinchGesture')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .scale({x:this.scale,y:this.scale})
        .gesture(
          PinchGesture()
            .onActionStart(()=>{
              console.info('Pinch start')
            })
            .onActionUpdate((event:GestureEvent)=>{
              this.scale = event.scale
            })
            .onActionEnd(()=>{
              console.info('Pinch end')
            })
        )
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

不过由于电脑模拟器只有一个鼠标，但是要实现捏合手势需要至少两根手指，所以这个功能就需要在真机上去查看了。

RotationGesture

RotationGesture是一个旋转手势。当然要实现一个旋转手势也是最少是需要两根手指的。

参数名称	默认值	参数描述
fingers?:number	2	触发捏合的最少手指数, 最小为2指，最大为5指。
angle?:number	1.0	触发旋转手势的最小改变度数，单位为度数。

回调函数	功能藐视
onActionStart((event?: GestureEvent) => void)	Rotation手势识别成功回调。
onActionUpdate((event?: GestureEvent) => void)	Rotation手势移动过程中回调。
onActionEnd((event?: GestureEvent) => void)	Rotation手势识别成功，手指抬起后触发回调。
onActionCancel(event: () => void)	Rotation手势识别成功，接收到触摸取消事件触发回调。

那我们就在下面的程序中去实现一个用两根手指去旋转，使得RotationGesture文本也旋转。

Text('RotationGesture')
        .fontSize(45)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .rotate({angle:this.angle})
        .gesture(
          RotationGesture()
            .onActionStart(() => {
              console.log('Rotation start')
            })
            .onActionUpdate((event: GestureEvent) => {
              this.angle = event.angle
            })
            .onActionEnd(() => {
              console.log('Rotation end')
            })
        )
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.