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