• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Gesture Binding
2
3
4You can bind to each component different gesture events and design the logic for responding to these events. When a gesture is successfully recognized, the ArkUI framework notifies the component of the gesture recognition result through event callback.
5
6
7## gesture (Common Gesture Binding Method)
8
9
10```ts
11.gesture(gesture: GestureType, mask?: GestureMask)
12```
13
14**gesture** is a frequently used API for binding a gesture to a component.
15
16For example, you can use it to bind the tap gesture to the **\<Text>** component.
17
18
19```ts
20// xxx.ets
21@Entry
22@Component
23struct Index {
24  build() {
25    Column() {
26      Text('Gesture').fontSize(28)
27        // Use the gesture API to bind the tap gesture.
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 (Gesture Binding Method with Priority)
42
43
44```ts
45.priorityGesture(gesture: GestureType, mask?: GestureMask)
46```
47
48The **priorityGesture** API binds gestures that are preferentially recognized to a component.
49
50By default, the child component preferentially recognizes the gesture specified by **gesture**, and the parent component preferentially recognizes the gesture specified by **priorityGesture** (if set).
51
52In the following example, the parent component **\<Column>** and child component **\<Text>** are both bound to the tap gesture. As the **\<Column>** is bound to the gesture through **priorityGesture**, the tap gesture recognized by the parent component is preferentially responded to.
53
54
55
56```ts
57// xxx.ets
58@Entry
59@Component
60struct Index {
61  build() {
62    Column() {
63      Text('Gesture').fontSize(28)
64        .gesture(
65          TapGesture()
66            .onAction(() => {
67              console.info('Text TapGesture is onAction');
68            }))
69    }
70    .height(200)
71    .width(250)
72    // When the tap gesture is bound to the parent <Column> component through priorityGesture, the tap gesture event of the <Text> component is ignored when the text area is tapped, and the tap gesture event of the<Column> component is preferentially responded to.
73    .priorityGesture(
74      TapGesture()
75        .onAction(() => {
76          console.info('Column TapGesture is onAction');
77        }), GestureMask.IgnoreInternal)
78  }
79}
80```
81
82
83## parallelGesture (Parallel Gesture Binding Method)
84
85
86```ts
87.parallelGesture(gesture: GestureType, mask?: GestureMask)
88```
89
90The **parallelGesture** API binds to a component the gesture that can be triggered together with the child component gesture.
91
92By default, the gesture event does not bubble up. When a parent component and a child component are bound to a same gesture, the gesture events bound to the parent component and the child component compete with each other, and a gesture event of at most one component can be responded to. When **parallelGesture** is set, the same gesture events can be triggered for the parent and child components, thereby implementing a bubbling effect.
93
94
95
96```ts
97// xxx.ets
98@Entry
99@Component
100struct Index {
101  build() {
102    Column() {
103      Text('Gesture').fontSize(28)
104        .gesture(
105          TapGesture()
106            .onAction(() => {
107              console.info('Text TapGesture is onAction');
108            }))
109    }
110    .height(200)
111    .width(250)
112    // When parallelGesture is set, the tap gestures on the <Column> component and on the child <Text> component are both recognized.
113    .parallelGesture(
114      TapGesture()
115        .onAction(() => {
116          console.info('Column TapGesture is onAction');
117        }), GestureMask.Normal)
118  }
119}
120```
121
122
123>**NOTE**
124>
125>When the parent component and the child component are bound to both the click gesture and the double-click gesture, both the parent component and the child component respond only to the click gesture.
126