• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ArkUI Animation/Interaction Event Development (ArkTS)
2
3## What should I do if the onBlur and onFocus callbacks cannot be triggered?
4
5Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
6
7**Symptom**
8
9The **onBlur** and **onFocus** callbacks of the focus event cannot be triggered.
10
11**Solution**
12
13Check the trigger device. By default, the focus event (and the **onBlur** and **onFocus** callbacks) can be triggered only by the Tab button and arrow buttons on the connected keyboard. To enable the focus event to be triggered by a touch, add the **focusOnTouch** attribute for the target component.
14
15**Reference**
16
17[Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
18
19## How do I disable the scroll event of a \<Grid> nested in the \<Scroll>?
20
21Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
22
23Implement nested scrolling of the containers, by using the **onScrollFrameBegin** event and the **scrollBy** method.
24
25**Reference**
26
27[Scroll](../reference/arkui-ts/ts-container-scroll.md#example-2)
28
29## How do I enable a component to rotate continuously?
30
31Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
32
33You can use [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) to that effect.
34
35## How do I scroll a list with the keyboard?
36
37Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
38
39**Solution**
40
41 Use either of the following:
42
43- Add **focusable\(true\)** to the list item to enable it to obtain focus.
44- Nest a focusable component, for example, **\<Button>**, at the outer layer of each item.
45
46## Why is the click event not triggered for the focused component upon the press of the Enter key after keyboard navigation?
47
48Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
49
50By default, the built-in click event of the component and the custom **onClick** click event are bound to the space bar instead of the Enter key.
51
52## How do I block event bubbling when a button is nested in multi-layer components?
53
54Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
55
56You can bind the button to the **stopPropagation** parameter.
57
58## How do I disable the transition effect between pages when the router or navigator is used to switch between pages?
59
60Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
61
621.  Define the **pageTransition** method for the current and target pages, by following instructions in [Example](../reference/arkui-ts/ts-page-transition-animation.md#example).
632.  Set the **duration** parameter of both **PageTransitionEnter** and **PageTransitionExit** to **0**.
64
65## How do I fix misidentification of the pan gesture where container nesting is involved?
66
67Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
68
69The pan gesture requires a minimum 5 vp movement distance of a finger on the screen. You can set the **distance** parameter in **PanGesture** to **1** so that the pan gesture can be more easily recognized.
70
71**Reference**
72
73[PanGesture](../reference/arkui-ts/ts-basic-gestures-pangesture.md)
74
75## Can I use the fontFamily attribute to set different fonts for OpenHarmony applications?
76
77Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
78
79No. For applications developed based on OpenHarmony, only the default font, HarmonyOS Sans, is supported.
80
81## How do I implement a text input box that shows a soft keyboard when touched and hides the soft keyboard when a button is touched?
82
83Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
84
85Use **focusControl** for the **\<TextInput>** component to control its focus. The **\<TextInput>** component shows a soft keyboard when it gains focus and hides the soft keyboard when it loses focus.
86
87**Example**
88
89```
90build() {
91  Column() {
92    TextInput()
93    Button(`hide`)
94      .key('button')
95      .onClick(()=>{
96        focusControl.requestFocus('button')
97      })
98  }
99}
100```
101
102## How do I implement a button that only responds to the bound onClick event, but not the onTouch event bound to the button's parent component?
103
104Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
105
106Bind **onTouch** to the **\<Button>** component and use **stopPropagation\(\)** in **onTouch** to prevent **onTouch** from bubbling up to the parent component.
107
108**Example**
109
110```
111build() {
112  Row() {
113    Button ("Click Me")
114      .width(100)
115      .width(100)
116      .backgroundColor('#f00')
117      .onClick(()=>{
118        console.log("Button onClick")
119      })
120      .onTouch((e) => {
121        console.log("Button onTouch")
122        e.stopPropagation()
123      })
124  }
125  .onTouch(() => {
126    console.log("Row onTouch")
127  })
128}
129```
130
131## Why is the menu bound to a component not displayed by a right-click on the component?
132
133Applicable to: OpenHarmony 3.2 Beta (API version 9)
134
135**Solution**
136
137Currently, the menu is displayed when the bound component is clicked or long pressed.
138
139## How do I shield the default keyboard popup behavior of the \<TextInput> component?
140
141Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
142
143**Solution**
144
145Set the **focusable** attribute of the **\<TextInput>** component to **false**. In this way, the component is not focusable and therefore will not bring up the keyboard.
146
147## How do I implement the slide up and slide down effect for page transition?
148
149Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
150
151**Solution**
152
153You can use the **pageTransition** API to implement the page transition effect. Specifically, set the **slide** attribute in **PageTransitionEnter** and **PageTransitionExit** to **SlideEffect.Bottom**. In this way, the page slides in and out from the bottom.
154
155**Example**
156
157```
158// Index.ets
159@Entry
160@Component
161struct PageTransition1 {
162  build() {
163    Stack({alignContent: Alignment.Bottom}) {
164      Navigator({ target: 'pages/Page1'}) {
165        Image($r('app.media.ic_banner01')).width('100%').height(200) // Save the image in the media folder.
166      }
167    }.height('100%').width('100%')
168  }
169  pageTransition() {
170    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
171    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
172  }
173}
174```
175
176```
177// Page1.ets
178@Entry
179@Component
180struct PageTransition2 {
181  build() {
182    Stack({alignContent: Alignment.Bottom}) {
183      Navigator({ target: 'pages/Index'}) {
184        Image($r('app.media.ic_banner02')).width('100%').height(200) // Save the image in the media folder.
185      }
186    }.height('100%').width('100%')
187  }
188  pageTransition() {
189    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
190    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
191  }
192}
193```
194
195**Reference**
196
197[Page Transition](../reference/arkui-ts/ts-page-transition-animation.md)
198
199## How do I configure custom components to slide in and out from the bottom?
200
201Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
202
203**Symptom**
204
205Custom components A and B need to deliver the following effects: When custom component A, displayed at the bottom of the screen by default, is touched, it is hidden, and custom component B slides in from the bottom; when custom component B is touched, it is hidden, and custom component A slides in from the bottom.
206
207**Solution**
208
209You can use the **transition** attribute to create component transition animations. Set the **type** parameter to specify the component transition type, which can be component addition, component deletion, or both. Set the **translate** parameter to specify the translation of the component during transition. **NOTE**<br>The **transition** attribute must work with **animateTo**. The animation duration, curve, and delay follow the settings in **animateTo**.
210
211**Example**
212
213```
214@Entry
215@Component
216struct ComponentTransition {
217  @State flag: boolean = true;
218
219  build() {
220    Stack({alignContent: Alignment.Bottom}) {
221        if (this.flag) {
222          ComponentChild1({ flag: $flag })
223            .transition({ type: TransitionType.Insert,translate: { x: 0, y: 200 } })
224        }
225        if (!this.flag) {
226          ComponentChild2({ flag: $flag })
227            .transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } })
228        }
229    }.height('100%').width('100%')
230  }
231}
232
233@Component
234struct ComponentChild1 {
235  @Link flag: boolean
236
237  build() {
238    Column() {
239      Image($r('app.media.ic_banner01'))
240        .width('100%')
241        .height(200)
242        .onClick(() => {
243          animateTo({ duration: 1000 }, () => {
244            this.flag = !this.flag;
245          })
246        })
247    }
248  }
249}
250
251@Component
252struct ComponentChild2 {
253  @Link flag: boolean
254
255  build() {
256    Column() {
257      Image($r('app.media.ic_banner02'))
258        .width('100%')
259        .height(200)
260        .onClick(() => {
261          animateTo({ duration: 1000 }, () => {
262            this.flag = !this.flag;
263          })
264        })
265    }
266  }
267}
268```
269
270**Reference**
271
272[Enter/Exit Transition](../ui/arkts-enter-exit-transition.md)
273