1# 绑定手势方法
2
3
4通过给各个组件绑定不同的手势事件，并设计事件的响应方式，当手势识别成功时，ArkUI框架将通过事件回调通知组件手势识别的结果。
5
6
7## gesture（常规手势绑定方法）
8
9
10```ts
11.gesture(gesture: GestureType, mask?: GestureMask)
12```
13
14gesture为通用的一种手势绑定方法，可以将手势绑定到对应的组件上。
15
16例如，可以将点击手势TapGesture通过gesture手势将方法绑定到Text组件上。
17
18
19```ts
20// xxx.ets
21@Entry
22@Component
23struct Index {
24  build() {
25    Column() {
26      Text('Gesture').fontSize(28)
27        // 采用gesture手势绑定方法绑定TapGesture
28        .gesture(
29          TapGesture()
30            .onAction(() => {
31              console.info('TapGesture is onAction');
32            }))
33    }
34    .height(200)
35    .width(250)
36  }
37}
38```
39
40
41## priorityGesture（带优先级的手势绑定方法）
42
43
44```ts
45.priorityGesture(gesture: GestureType, mask?: GestureMask)
46```
47
48priorityGesture是带优先级的手势绑定方法，可以在组件上绑定优先识别的手势。
49
50在默认情况下，当父组件和子组件使用gesture绑定同类型的手势时，子组件优先识别通过gesture绑定的手势。当父组件使用priorityGesture绑定与子组件同类型的手势时，父组件优先识别通过priorityGesture绑定的手势。
51
52长按手势时，设置触发长按的最短时间小的组件会优先响应，会忽略priorityGesture设置。
53
54例如，当父组件Column和子组件Text同时绑定TapGesture手势时，父组件以带优先级手势priorityGesture的形式进行绑定时，优先响应父组件绑定的TapGesture。
55
56
57
58```ts
59// xxx.ets
60@Entry
61@Component
62struct Index {
63  build() {
64    Column() {
65      Text('Gesture').fontSize(28)
66        .gesture(
67          TapGesture()
68            .onAction(() => {
69              console.info('Text TapGesture is onAction');
70            }))
71    }
72    .height(200)
73    .width(250)
74    // 设置为priorityGesture时，点击文本区域会忽略Text组件的TapGesture手势事件，优先响应父组件Column的TapGesture手势事件
75    .priorityGesture(
76      TapGesture()
77        .onAction(() => {
78          console.info('Column TapGesture is onAction');
79        }), GestureMask.IgnoreInternal)
80  }
81}
82```
83
84
85## parallelGesture（并行手势绑定方法）
86
87
88```ts
89.parallelGesture(gesture: GestureType, mask?: GestureMask)
90```
91
92parallelGesture是并行的手势绑定方法，可以在父子组件上绑定可以同时响应的相同手势。
93
94在默认情况下，手势事件为非冒泡事件，当父子组件绑定相同的手势时，父子组件绑定的手势事件会发生竞争，最多只有一个组件的手势事件能够获得响应。而当父组件绑定了并行手势parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果。
95
96
97
98```ts
99// xxx.ets
100@Entry
101@Component
102struct Index {
103  build() {
104    Column() {
105      Text('Gesture').fontSize(28)
106        .gesture(
107          TapGesture()
108            .onAction(() => {
109              console.info('Text TapGesture is onAction');
110            }))
111    }
112    .height(200)
113    .width(250)
114    // 设置为parallelGesture时，点击文本区域会同时响应父组件Column和子组件Text的TapGesture手势事件
115    .parallelGesture(
116      TapGesture()
117        .onAction(() => {
118          console.info('Column TapGesture is onAction');
119        }), GestureMask.Normal)
120  }
121}
122```
123