鸿蒙HarmonyOS实战-ArkUI事件（触屏事件）

 媒介

触屏事件是指通过触摸屏幕来举行操纵和交互的事件。常见的触屏事件包括点击（tap）、双击（double tap）、长按（long press）、滑动（swipe）、拖动（drag）等。触屏事件通常用于移动设备和平板电脑等具有触摸屏幕的设备上，用户可以通过触摸屏幕上的不同区域大概以不同的方式举行操纵，从而实现各种功能和交互效果。触屏事件可以被应用程序大概操纵系统捕捉并相应，以实现用户与设备之间的交互。
一、触屏事件

在HarmonyOS中，触屏事件包括点击事件、拖拽事件和触摸事件，开发者可以通过使用HarmonyOS的触摸事件处理机制来捕捉和处理这些事件。

• 点击事件（Click Event）：当用户在屏幕上单击时触发。开发者可以通过重写onTouch或onTouchEvent方法来监听并处理点击事件。在处理点击事件时，可以获取点击位置的坐标、点击的View等信息。
  
• 拖拽事件（Drag Event）：当用户在屏幕上按住并拖动时触发。开发者可以通过重写onTouch或onTouchEvent方法来监听并处理拖拽事件。在处理拖拽事件时，可以获取当前拖拽的位置、起始位置、拖拽的View等信息。
  
• 触摸事件（Touch Event）：触摸事件是一系列的事件，包括按下、抬起、移动等。开发者可以通过重写onTouch或onTouchEvent方法来监听并处理触摸事件。在处理触摸事件时，可以获取触摸的位置、触摸的View等信息。
  

除了重写onTouch或onTouchEvent方法来处理触摸事件外，开发者还可以使用View.OnTouchListener接口来监听和处理触摸事件。通过设置View的OnTouchListener，可以实现对触摸事件的更加灵活的控制和处理。
触摸事件原理：

1.点击事件

点击事件是指用户通过鼠标或触摸屏等输入设备点击（或触摸）页面上的元素时触发的一种相应机制。当用户点击一个元素时会捕捉到点击事件，并执行相应的处理代码。点击事件常用于实现用户交互，比如点击按钮提交表单、点击链接跳转页面等操纵。
接口如下：

1. onClick(event: (event?: ClickEvent) => void)

复制代码

案例如下：

1. @Entry
2. @Component
3. struct IfElseTransition {
4.   @State flag: boolean = true;
5.   @State btnMsg: string = 'show';
7.   build() {
8.     Column() {
9.       Button(this.btnMsg).width(80).height(30).margin(30)
10.         .onClick(() => {
11.           if (this.flag) {
12.             this.btnMsg = 'hide';
13.             console.log('hide');
14.           } else {
15.             this.btnMsg = 'show';
16.             console.log('show');
17.           }
18.           // 点击Button控制Image的显示和消失
19.           this.flag = !this.flag;
20.         })
21.       if (this.flag) {
22.         Image($r('app.media.icon')).width(200).height(200)
23.       }
24.     }.height('100%').width('100%')
25.   }
26. }

复制代码

2.拖拽事件

拖拽事件是一种用户交互行为，指的是在计算机中，用户通过鼠标或触摸屏按住某个元素，拖动它并释放的操纵。拖拽事件通常分为三个阶段：开始拖拽、正在拖拽和结束拖拽。开始拖拽阶段是指当用户按住要拖拽的元素时触发的事件。正在拖拽阶段是指用户持续拖动元素时触发的事件。结束拖拽阶段是指用户释放鼠标或手指时触发的事件。拖拽事件可以用于实现一些交互效果，例如拖拽排序、拖拽放置和拖拽改变元素位置等。
接口如下：
接口名称形貌onDragStart(event: (event?: DragEvent, extraParams?: string) => CustomBuilderDragItemInfo)拖拽启动接口。当前仅支持自定义pixelmap和自定义组件。onDragEnter(event: (event?: DragEvent, extraParams?: string) => void)拖拽进入组件接口。DragEvent定义拖拽发生位置，extraParmas表示用户自定义信息onDragLeave(event: (event?: DragEvent, extraParams?: string) => void)拖拽离开组件接口。DragEvent定义拖拽发生位置，extraParmas表示拖拽事件额外信息。onDragMove(event: (event?: DragEvent, extraParams?: string) => void)拖拽移动接口。DragEvent定义拖拽发生位置，extraParmas表示拖拽事件额外信息。onDrop(event: (event?: DragEvent, extraParams?: string) => void)拖拽释放组件接口。DragEvent定义拖拽发生位置，extraParmas表示拖拽事件额外信息。 案例如下：
拖出窗体

1. import image from '@ohos.multimedia.image';
3. @Entry
4. @Component
5. struct Index {
6.   @State visible: Visibility = Visibility.Visible
7.   private pixelMapReader = undefined
9.   aboutToAppear() {
10.     console.info('begin to create pixmap has info message: ')
11.     this.createPixelMap()
12.   }
14.   createPixelMap() {
15.     let color = new ArrayBuffer(4 * 96 * 96);
16.     var buffer = new Uint8Array(color);
17.     for (var i = 0; i < buffer.length; i++) {
18.       buffer[i] = (i + 1) % 255;
19.     }
20.     let opts = {
21.       alphaType: 0,
22.       editable: true,
23.       pixelFormat: 4,
24.       scaleMode: 1,
25.       size: { height: 96, width: 96 }
26.     }
27.     const promise = image.createPixelMap(color, opts);
28.     promise.then((data) => {
29.       console.info('create pixmap has info message: ' + JSON.stringify(data))
30.       this.pixelMapReader = data;
31.     })
32.   }
34.   @Builder pixelMapBuilder() {
35.     Text('drag item')
36.       .width('100%')
37.       .height(100)
38.       .fontSize(16)
39.       .textAlign(TextAlign.Center)
40.       .borderRadius(10)
41.       .backgroundColor(0xFFFFFF)
42.   }
44.   build() {
45.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
46.       Text('App1')
47.         .width('40%')
48.         .height(80)
49.         .fontSize(20)
50.         .margin(30)
51.         .textAlign(TextAlign.Center)
52.         .backgroundColor(Color.Pink)
53.         .visibility(Visibility.Visible)
55.       Text('Across Window Drag This')
56.         .width('80%')
57.         .height(80)
58.         .fontSize(16)
59.         .margin(30)
60.         .textAlign(TextAlign.Center)
61.         .backgroundColor(Color.Pink)
62.         .visibility(this.visible)
63.         .onDragStart(() => {                    //启动跨窗口拖拽
64.           console.info('Text onDrag start')
65.           return { pixelMap: this.pixelMapReader, extraInfo: 'custom extra info.' }
66.         })
67.         .onDrop((event: DragEvent, extraParams: string) => {
68.           console.info('Text onDragDrop,  ')
69.           this.visible = Visibility.None                    //拖动结束后，使源不可见
70.         })
71.     }
73.     .width('100%')
74.     .height('100%')
75.   }
76. }

复制代码

拖入窗体

1. @Entry
2. @Component
3. struct Index {
4.   @State number: string[] = ['drag here']
5.   @State text: string = ''
6.   @State bool1: boolean = false
7.   @State bool2: boolean = false
8.   @State visible: Visibility = Visibility.Visible
9.   @State visible2: Visibility = Visibility.None
10.   scroller: Scroller = new Scroller()
12.   build() {
13.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
14.       Text('App2')
15.         .width('40%')
16.         .height(80)
17.         .fontSize(20)
18.         .margin(30)
19.         .textAlign(TextAlign.Center)
20.         .backgroundColor(Color.Pink)
21.         .visibility(Visibility.Visible)
23.       List({ space: 20, initialIndex: 0 }) {
24.         ForEach(this.number, (item) => {
25.           ListItem() {
26.             Text('' + item)
27.               .width('100%')
28.               .height(80)
29.               .fontSize(16)
30.               .borderRadius(10)
31.               .textAlign(TextAlign.Center)
32.               .backgroundColor(0xFFFFFF)
33.           }
34.         }, item => item)
36.         ListItem() {
37.           Text('Across Window Drag This')
38.             .width('80%')
39.             .height(80)
40.             .fontSize(16)
41.             .margin(30)
42.             .textAlign(TextAlign.Center)
43.             .backgroundColor(Color.Pink)
44.             .visibility(this.visible2)
45.         }
46.       }
47.       .height('50%')
48.       .width('90%')
49.       .border({ width: 1 })
50.       .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
51.       .onDragEnter((event: DragEvent, extraParams: string) => {                         //拖拽进去组件
52.         console.info('List onDragEnter, ' + extraParams)
53.       })
54.       .onDragMove((event: DragEvent, extraParams: string) => {                          //拖拽时移动
55.         console.info('List onDragMove, ' + extraParams)
56.       })
57.       .onDragLeave((event: DragEvent, extraParams: string) => {                         //拖拽离开组件
58.         console.info('List onDragLeave, ' + extraParams)
59.       })
60.       .onDrop((event: DragEvent, extraParams: string) => {                              //释放组件
61.         console.info('List onDragDrop, ' + extraParams)
62.         this.visible2 = Visibility.Visible                                              //拖拽完成使拖入目标可见
63.       })
64.     }
65.     .width('100%')
66.     .height('100%')
67.   }
68. }

复制代码

因为不好演示就不截图了
3.触摸事件

触摸事件是一种用户与触摸屏或触摸设备举行交互的方式。当用户通过手指或手写笔触摸屏幕或其他触摸设备时，设备会检测到并触发相应的事件。触摸事件可以包括触摸开始、触摸移动、触摸结束、触摸取消等不同的操纵状态。
触摸事件常用于移动设备，例如智能手机、平板电脑等。通过触摸屏幕，用户可以举行滑动、点击、缩放等操纵，实现与设备的交互。
在软件开发中，可以通过监听触摸事件，来相应用户的触摸操纵。开发者可以根据触摸事件的不同状态，执行相应的操纵，例如在用户滑动屏幕时举行页面切换，大概在用户点击屏幕时举行按钮点击等。触摸事件的处理可以通过各种编程语言和开发框架来实现。
接口如下：

1. onTouch(event: (event?: TouchEvent) => void)

复制代码

• event.type为TouchType.Down：表示手指按下。
  
• event.type为TouchType.Up：表示手指抬起。
  
• event.type为TouchType.Move：表示手指按住移动。
  

案例如下：

1. // xxx.ets
2. @Entry
3. @Component
4. struct TouchExample {
5.   @State text: string = '';
6.   @State eventType: string = '';
8.   build() {
9.     Column() {
10.       Button('Touch').height(40).width(100)
11.         .onTouch((event: TouchEvent) => {
12.           if (event.type === TouchType.Down) {
13.             this.eventType = 'Down';
14.           }
15.           if (event.type === TouchType.Up) {
16.             this.eventType = 'Up';
17.           }
18.           if (event.type === TouchType.Move) {
19.             this.eventType = 'Move';
20.           }
21.           this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
22.           + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
23.           + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
24.           + event.target.area.width + '\nheight:' + event.target.area.height
25.         })
26.       Button('Touch').height(50).width(200).margin(20)
27.         .onTouch((event: TouchEvent) => {
28.           if (event.type === TouchType.Down) {
29.             this.eventType = 'Down';
30.           }
31.           if (event.type === TouchType.Up) {
32.             this.eventType = 'Up';
33.           }
34.           if (event.type === TouchType.Move) {
35.             this.eventType = 'Move';
36.           }
37.           this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
38.           + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
39.           + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
40.           + event.target.area.width + '\nheight:' + event.target.area.height
41.         })
42.       Text(this.text)
43.     }.width('100%').padding(30)
44.   }
45. }

复制代码