提交 da802cca 编写于 作者: E ester.zhou

Update docs (18439)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 ea9f7991
...@@ -4,7 +4,12 @@ ...@@ -4,7 +4,12 @@
- [Switching to Full SDK](full-sdk-switch-guide.md) - [Switching to Full SDK](full-sdk-switch-guide.md)
- [Application Model Development](faqs-ability.md) - [Application Model Development](faqs-ability.md)
- ArkUI Framework Development (ArkTS) - ArkUI Framework Development (ArkTS)
- [ArkUI Development (ArkTS Syntax)](faqs-arkui-arkts.md) - [ArkTS Syntax Usage](faqs-arkui-arkts.md)
- [ArkUI Component Development (ArkTS)](faqs-arkui-component.md)
- [ArkUI Layout Development (ArkTS)](faqs-arkui-layout.md)
- [ArkUI Routing/Navigation Development (ArkTS)](faqs-arkui-route-nav.md)
- [ArkUI Animation/Interaction Event Development (ArkTS)](faqs-arkui-animation-interactive-event.md)
- [ArkUI Development (JS)](faqs-arkui-js.md)
- [Web Development](faqs-arkui-web.md) - [Web Development](faqs-arkui-web.md)
- [Bundle Management Development](faqs-bundle-management.md) - [Bundle Management Development](faqs-bundle-management.md)
- [Resource Manager Development](faqs-globalization.md) - [Resource Manager Development](faqs-globalization.md)
......
# ArkUI Animation/Interaction Event Development (ArkTS)
## What should I do if the onBlur and onFocus callbacks cannot be triggered?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom**
The **onBlur** and **onFocus** callbacks of the focus event cannot be triggered.
**Solution**
Check 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.
**Reference**
[Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
## How do I disable the scroll event of a \<Grid> nested in the \<Scroll>?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Implement nested scrolling of the containers, by using the **onScrollFrameBegin** event and the **scrollBy** method.
**Reference**
[Scroll](../reference/arkui-ts/ts-container-scroll.md#example-2)
## How do I enable a component to rotate continuously?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can use [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) to that effect.
## How do I scroll a list with the keyboard?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
- Add **focusable\(true\)** to the list item to enable it to obtain focus.
- Nest a focusable component, for example, **\<Button>**, at the outer layer of each item.
## Why is the click event not triggered for the focused component upon the press of the Enter key after keyboard navigation?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
By 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.
## How do I block event bubbling when a button is nested in multi-layer components?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can bind the button to the **stopPropagation** parameter.
## How do I disable the transition effect between pages when the router or navigator is used to switch between pages?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
1. Define the **pageTransition** method for the current and target pages, by following instructions in [Example](../reference/arkui-ts/ts-page-transition-animation.md#example).
2. Set the **duration** parameter of both **PageTransitionEnter** and **PageTransitionExit** to **0**.
## How do I fix misidentification of the pan gesture where container nesting is involved?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
The 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.
**Reference**
[PanGesture](../reference/arkui-ts/ts-basic-gestures-pangesture.md)
## Can I use the fontFamily attribute to set different fonts for OpenHarmony applications?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
No. For applications developed based on OpenHarmony, only the default font, HarmonyOS Sans, is supported.
## 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?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Use **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.
**Example**
```
build() {
Column() {
TextInput()
Button(`hide`)
.key('button')
.onClick(()=>{
focusControl.requestFocus('button')
})
}
}
```
## 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?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Bind **onTouch** to the **\<Button>** component and use **stopPropagation\(\)** in **onTouch** to prevent **onTouch** from bubbling up to the parent component.
**Example**
```
build() {
Row() {
Button ("Click Me")
.width(100)
.width(100)
.backgroundColor('#f00')
.onClick(()=>{
console.log("Button onClick")
})
.onTouch((e) => {
console.log("Button onTouch")
e.stopPropagation()
})
}
.onTouch(() => {
console.log("Row onTouch")
})
}
```
## Why is the menu bound to a component not displayed by a right-click on the component?
Applicable to: OpenHarmony 3.2 Beta (API version 9)
**Solution**
Currently, the menu is displayed when the bound component is clicked or long pressed.
## How do I shield the default keyboard popup behavior of the \<TextInput> component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
Set 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.
## How do I implement the slide up and slide down effect for page transition?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Solution**
You 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.
**Example**
```
// Index.ets
@Entry
@Component
struct PageTransition1 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Page1'}) {
Image($r('app.media.ic_banner01')).width('100%').height(200) // Save the image in the media folder.
}
}.height('100%').width('100%')
}
pageTransition() {
PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
}
}
```
```
// Page1.ets
@Entry
@Component
struct PageTransition2 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Index'}) {
Image($r('app.media.ic_banner02')).width('100%').height(200) // Save the image in the media folder.
}
}.height('100%').width('100%')
}
pageTransition() {
PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
}
}
```
**Reference**
[Page Transition Animation](../ui/arkts-page-transition-animation.md)
## How do I configure custom components to slide in and out from the bottom?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Symptom**
Custom 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.
**Solution**
You 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**.
**Example**
```
@Entry
@Component
struct ComponentTransition {
@State flag: boolean = true;
build() {
Stack({alignContent: Alignment.Bottom}) {
if (this.flag) {
ComponentChild1({ flag: $flag })
.transition({ type: TransitionType.Insert,translate: { x: 0, y: 200 } })
}
if (!this.flag) {
ComponentChild2({ flag: $flag })
.transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } })
}
}.height('100%').width('100%')
}
}
@Component
struct ComponentChild1 {
@Link flag: boolean
build() {
Column() {
Image($r('app.media.ic_banner01'))
.width('100%')
.height(200)
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.flag = !this.flag;
})
})
}
}
}
@Component
struct ComponentChild2 {
@Link flag: boolean
build() {
Column() {
Image($r('app.media.ic_banner02'))
.width('100%')
.height(200)
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.flag = !this.flag;
})
})
}
}
}
```
**Reference**
[Transition Animation Within the Component](../ui/arkts-transition-animation-within-component.md)
# ArkUI Development (ArkTS Syntax) # ArkTS Syntax Usage
## How do I dynamically create components using code in ArkUI? ## How do I dynamically create components using code in ArkUI?
...@@ -522,7 +522,7 @@ Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) ...@@ -522,7 +522,7 @@ Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Reference** **Reference**
[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md#getstring) [Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md)
## How do I convert the XML format to the JSON format? ## How do I convert the XML format to the JSON format?
......
# ArkUI Development # ArkUI Component Development (ArkTS)
## How do I dynamically replace the %s placeholder in a resource file?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom**
How do I dynamically replace the %s placeholder in a resource file?
**Solution**
In an application, you can replace the **%s** placeholder by using the second parameter in **$r('app.string.xx')**, which is used to reference application resources.
**Example**
```
build() {
//do something
// The second parameter indicates the referenced string resource, which can be used to replace the %s placeholder.
Text($r('app.string.entry_desc','aaa'))
.fontSize(100)
.fontColor(Color.Black)
//do something
}
```
## Can custom dialog boxes be defined or used in .ts files? ## Can custom dialog boxes be defined or used in .ts files?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Unfortunately, no. ArkTS syntax is required for defining and initializing custom dialog boxes. Therefore, they can be defined and used only in .ets files. Unfortunately, no. ArkTS syntax is required for defining and initializing custom dialog boxes. Therefore, they can be defined and used only in .ets files.
...@@ -37,7 +12,7 @@ Unfortunately, no. ArkTS syntax is required for defining and initializing custom ...@@ -37,7 +12,7 @@ Unfortunately, no. ArkTS syntax is required for defining and initializing custom
## How do I transfer variables in a custom dialog box to a page? ## How do I transfer variables in a custom dialog box to a page?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -177,7 +152,7 @@ The variable defined in a custom dialog box needs to be transferred to the page ...@@ -177,7 +152,7 @@ The variable defined in a custom dialog box needs to be transferred to the page
## How do I obtain the width and height of a component? ## How do I obtain the width and height of a component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -194,7 +169,7 @@ The width and height of a component need to be obtained to calculate the size an ...@@ -194,7 +169,7 @@ The width and height of a component need to be obtained to calculate the size an
## How do I clear the content of the \<TextInput> and \<TextArea> components by one click? ## How do I clear the content of the \<TextInput> and \<TextArea> components by one click?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -230,7 +205,7 @@ controller: TextInputController = new TextInputController() ...@@ -230,7 +205,7 @@ controller: TextInputController = new TextInputController()
## How do I set the position of a custom dialog box? ## How do I set the position of a custom dialog box?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -246,7 +221,7 @@ During initialization of the custom dialog box, set the **alignment** and **offs ...@@ -246,7 +221,7 @@ During initialization of the custom dialog box, set the **alignment** and **offs
## How do I hide the overflow content of a container component? ## How do I hide the overflow content of a container component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -260,10 +235,9 @@ To clip and hide overflow content, set the **clip** universal attribute to **tru ...@@ -260,10 +235,9 @@ To clip and hide overflow content, set the **clip** universal attribute to **tru
[Shape Clipping](../reference/arkui-ts/ts-universal-attributes-sharp-clipping.md) [Shape Clipping](../reference/arkui-ts/ts-universal-attributes-sharp-clipping.md)
## How do I set a custom dialog box to automatically adapt its size to content? ## How do I set a custom dialog box to automatically adapt its size to content?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -280,9 +254,9 @@ When a custom dialog box contains a child component whose area size can be chang ...@@ -280,9 +254,9 @@ When a custom dialog box contains a child component whose area size can be chang
## What is the function of the gridCount parameter in the custom dialog box? ## What is the function of the gridCount parameter in the custom dialog box?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
The **gridCount** parameter indicates the number of grid columns occupied by the dialog box. The system divides the window width into equal regions. The number of equal regions is the number of grid columns, which varies by device. For example, if the screen density of a phone is 320 vp <= horizontal width < 600 vp, the number of grid columns is 4, and the valid value of **gridCount** is \[1, 4\]. The **gridCount** parameter indicates the number of grid columns occupied by the dialog box. The system divides the window width into equal regions. The number of equal regions is the number of grid columns, which varies by device. For example, if the screen density of a device is 320 vp <= horizontal width < 600 vp, the number of grid columns is 4, and the valid value of **gridCount** is \[1, 4\].
Note: This parameter is valid only when the custom dialog box is in the default style. Note: This parameter is valid only when the custom dialog box is in the default style.
...@@ -292,7 +266,7 @@ Note: This parameter is valid only when the custom dialog box is in the default ...@@ -292,7 +266,7 @@ Note: This parameter is valid only when the custom dialog box is in the default
## How do I remove the white background of a custom dialog box? ## How do I remove the white background of a custom dialog box?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -311,7 +285,7 @@ To remove the white background, set the custom dialog box to a custom style. ...@@ -311,7 +285,7 @@ To remove the white background, set the custom dialog box to a custom style.
## How do I customize the eye icon for the password input mode of the \<TextInput> component? ## How do I customize the eye icon for the password input mode of the \<TextInput> component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -327,7 +301,7 @@ The eye icon itself cannot be customized. You can use set the **showPasswordIcon ...@@ -327,7 +301,7 @@ The eye icon itself cannot be customized. You can use set the **showPasswordIcon
## How do I use the onSubmit event of the \<TextInput> component? ## How do I use the onSubmit event of the \<TextInput> component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution** **Solution**
...@@ -339,7 +313,7 @@ The **onSubmit** event is triggered when a user presses **Enter** on the (physic ...@@ -339,7 +313,7 @@ The **onSubmit** event is triggered when a user presses **Enter** on the (physic
## How do I set the caret position to the start point for when the \<TextInput> component obtains focus? ## How do I set the caret position to the start point for when the \<TextInput> component obtains focus?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -377,21 +351,10 @@ struct TextInputDemo { ...@@ -377,21 +351,10 @@ struct TextInputDemo {
[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md) [TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)
## How do I obtain component attribute information?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
**Solution**
To obtain all attributes of a component, use **getInspectorByKey**.
**Reference**
[Component ID](../reference/arkui-ts/ts-universal-attributes-component-id.md)
## How do I obtain the current scrolling offset of a scrollable component? ## How do I obtain the current scrolling offset of a scrollable component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution** **Solution**
...@@ -404,7 +367,7 @@ Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) ...@@ -404,7 +367,7 @@ Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
## How do I align text vertically? ## How do I align text vertically?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom** **Symptom**
...@@ -412,7 +375,7 @@ Text cannot be aligned vertically in the **\<Text>** component. ...@@ -412,7 +375,7 @@ Text cannot be aligned vertically in the **\<Text>** component.
**Solution** **Solution**
Text is aligned horizontally in the **\<Text>** component. To enable text to align vertically, you can split the file, use the **\<Flex>** container component, and set its main axis direction to vertical. Text is aligned horizontally in the **\<Text>** component. To enable text to align vertically, you can split the file, include it in a **\<Flex>** container, and set the container's main axis direction to vertical.
**Example** **Example**
...@@ -433,41 +396,15 @@ struct Index15 { ...@@ -433,41 +396,15 @@ struct Index15 {
} }
``` ```
## How do I create a toast window?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
**Symptom**
A toast window is required for delivering a toast message.
**Solution**
To create a toast window, use the **@ohos.promptAction** API.
**Reference**
[@ohos.promptAction (Prompt)](../reference/apis/js-apis-promptAction.md)
## Can I set the background or font color for the toast window?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
This feature is not supported currently.
**Reference**
[@ohos.promptAction (Prompt)](../reference/apis/js-apis-promptAction.md)
## How do I set the UI of an ability to transparent? ## How do I set the UI of an ability to transparent?
Applicable to: OpenHarmony 3.2 (API version 9) Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Solution** **Solution**
Set the background color of the top container component to transparent, and then set the **opacity** attribute of the XComponent to **0.01**. Set the background color of the top container component to transparent, and then set the **opacity** attribute of the XComponent to **0.01**.
Example: **Example**
``` ```
build() { build() {
...@@ -519,14 +456,6 @@ Unless otherwise specified, the height of the **\<Scroll>** component is equal t ...@@ -519,14 +456,6 @@ Unless otherwise specified, the height of the **\<Scroll>** component is equal t
Set the height of the **\<Scroll>** component or use the flex layout to limit this height. Set the height of the **\<Scroll>** component or use the flex layout to limit this height.
## What is the counterpart of CenterCrop in OpenHarmony for backgroundImage?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
**Solution**
To achieve the equivalent effect CenterCrop – place the image in the center of the window and scale the image while maintaining its aspect ratio, you can use the universal attributes **backgroundImageSize**\(**ImageSize.cover**\) and **backgroundImagePosition** \(**Alignment.Center**\).
## How do I customize the control bar style of the \<Video> component? ## How do I customize the control bar style of the \<Video> component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model) Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
...@@ -697,720 +626,62 @@ When a container component with a fixed size is added to the **\<Scroll>** compo ...@@ -697,720 +626,62 @@ When a container component with a fixed size is added to the **\<Scroll>** compo
Do not set a size for any container component in the **\<Scroll>** component. In this way, the **\<Scroll>** component can adapt its size to the content. Do not set a size for any container component in the **\<Scroll>** component. In this way, the **\<Scroll>** component can adapt its size to the content.
## What should I do if the height settings in position do not take effect? ## How does a component process click events in its child components?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom**
After **position** is set for a container component, the **height** settings do not work.
**Solution**
When **position** is set for a container component, it is taken out of normal flow and works independently from the outer container. In this case, the height does not take effect. You can replace the outer container with a stack to solve this issue.
## Why can't the onBlur or onFocus callback be triggered?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
By default, only the Tab button and arrow buttons on the connected keyboard can be used to trigger the focus event. To trigger a focus event by a touch, add the **focusOnTouch** attribute for the target component.
**Reference**
[Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
## How do I disable the scroll event of a \<Grid> nested in the \<Scroll>?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can use the **onScrollFrameBegin** event and **scrollBy** API to implement nested scrolling of the containers.
For details, see [Nested Scrolling Example](../reference/arkui-ts/ts-container-scroll.md#example-2).
## How do I enable a component to rotate continuously?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can use [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) to that effect.
## How do I scroll a list with the keyboard?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
- Add **focusable\(true\)** to the list item to enable it to obtain focus.
- Nest a focusable component, for example, **\<Button>**, at the outer layer of each item.
## Why is the click event not triggered for the focused component upon the press of the Enter key after keyboard navigation?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
By 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.
## How do I block event bubbling when a button is nested in multi-layer components?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can bind the button to the **stopPropagation** parameter.
## How do I dynamically create components using code in ArkUI?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
ArkUI uses the ArkTS declarative development paradigm. Developers cannot hold component instances. During declaration, you can control component creation by rendering control syntax and dynamically building UI elements.
**Example**
```
// Create a component using the if statement.
if(this.isTrue) {
Text ("Create Text Component").fontSize (30)
}
// Create a component using the ForEach statement.
ForEach(this.nums,(item) => {
Text(item + '').fontSize(30)
},item => JSON.stringify(item))
```
**Reference**
[Overview of Rendering Control](../quick-start/arkts-rendering-control-overview.md)
## What is the difference between an @Builder decorated method and a regular method?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
The @Builder decorated method allows for use of a custom component, while regular methods do not. If a custom component is used in an @Builder decorated method, it is re-created each time the method is called.
**Reference**
[@BuilderParam](../quick-start/arkts-builderparam.md)
## How do I define @BuilderParam decorated attributes?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
- Without parameters
If no parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **content: this.specificParam**), define the type of the attribute as a function without a return value (for example, **@BuilderParam content: \(\) =\> void**).
- With parameters
If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **callContent: this.specificParam1\("111"\)**), define the type of the attribute as **any** (for example, **@BuilderParam callContent: any**).
**Reference**
[@BuilderParam](../quick-start/arkts-builderparam.md)
## How do I listen for object changes in an array?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Solution**
To listen for object changes in an array, use the @Observed and @ObjectLink decorators. **@Observed** applies to classes, and **@ObjectLink** applies to variables.
**Example**
1. Use @Observed on a class.
```
@Observed
class ClassA {
public name: string
public c: number
public id: number
constructor(c: number, name: string = 'OK') {
this.name = name
this.c = c
}
}
```
2. Use @ObjectLink on a component variable.
```
@Component
struct ViewA {
label: string = 'ViewA1'
@ObjectLink a: ClassA
build() {
Row() {
Button(`ViewA [${this.label}] this.a.c= ${this.a.c} +1`)
.onClick(() => {
this.a.c += 1
})
}.margin({ top: 10 })
}
}
```
**Reference**
[\@Observed and \@ObjectLink: Observing Attribute Changes in Nested Class Objects](../quick-start/arkts-observed-and-objectlink.md)
## How do I transfer values through the parent component to @Link decorated varaibles in a child component?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
To enable a child component to receive the value from the parent component through @Link, '**\$**' must be used to first establish a reference relationship between variables in the child and parent components.
**Example**
The **@Link** semantics are derived from the '**$**' operator. In other words, **$isPlaying** is the two-way binding of the internal state **this.isPlaying**. When the button in the **PlayButton** child component is touched, the value of the @Link decorated variable is changed, and **PlayButton** together with the **\<Image>** and **\<Text>** components of the parent component is refreshed. Similarly, when the button in the parent component is touched, the value of **this.isPlaying** is changed, and **PlayButton** together with the **\<Text>** and **\<Button>** components of the parent component is refreshed.
1. Use the @State decorator in the parent component and use the '**\$**' operator to create a reference for transferring data.
```
@Entry
@Component
struct Player {
@State isPlaying: boolean = false
build() {
Column() {
PlayButton({ buttonPlaying: $isPlaying })
Text(`Player is ${this.isPlaying ? '' : 'not'} playing`).fontSize(18)
Button('Parent:' + this.isPlaying)
.margin(15)
.onClick(() => {
this.isPlaying = !this.isPlaying
})
}
}
}
```
2. Use @Link in the child component to receive data.
```
@Component
struct PlayButton {
@Link buttonPlaying: boolean
build() {
Column() {
Button(this.buttonPlaying ? 'pause' : 'play')
.margin(20)
.onClick(() => {
this.buttonPlaying = !this.buttonPlaying
})
}
}
}
```
**Reference**
[@Link](../quick-start/arkts-link.md)
## How does a component synchronize state with its grandchild components?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
- Method 1 (recommended): Use the @Provide and @Consume decorators. Specifically, use @Provide in the component and @Consume in the grandchild component to implement two-way data binding between the components.
- Method 2: Use the @State and @Link decorators. Specifically, use @State in the parent component and @Link in each layer of child components (child and grandchild components).
**Example 1**
1. Include a child component in the component. Employ @Provide in the component to provide the **reviewVote** parameter to its grandchild component.
```
@Entry
@Component
struct Father{
@Provide("reviewVote") reviewVotes: number = 0;
build() {
Column() {
Son()
Button(`Father: ${this.reviewVotes}`)
...
}
}
}
```
2. Include the grandchild component in the child component. Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
```
@Component
struct Son{
build() {
Column() {
GrandSon()
}
}
}
```
3. Employ @Consume in the grandchild component to receive the **reviewVote** parameter.
```
@Component
struct GrandSon{
@Consume("reviewVote") reviewVotes: number
build() {
Column() {
Button(`GrandSon: ${this.reviewVotes}`)
...
}.width('100%')
}
}
```
**Example 2**
1. Employ @State in the component **Father** to decorate **reviewVote**.
```
@Entry
@Component
struct Father {
@State reviewVotes: number = 0;
build() {
Column() {
Son({reviewVotes:$reviewVotes})
Button(`Father: ${this.reviewVotes}`)
...
}
}
}
```
2. Employ @Link in the child component **Son** to receive the **reviewVote** parameter passed from **Father**.
```
@Component
struct Son{
@Link reviewVotes: number;
build() {
Column() {
Grandson({reviewVotes:$reviewVotes})
}
}
}
```
3. Employ @Link in the grandchild component **GrandSon** to receive the **reviewVote** parameter passed from **Son**.
```
@Component
struct Grandson{
@Link reviewVotes: number;
build() {
Column() {
Button(`Grandson: ${this.reviewVotes}`)
...
}.width('100%')
}
}
```
## How is a callback function defined in JS?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
The following is an example to illustrate how to define a callback function:
1. Define the callback function.
```
// Define a callback function that contains two parameters and returns void.
myCallback: (a:number,b:string) => void
```
2. Initialize the callback function by assigning values.
```
aboutToAppear() {
// Initialize the callback function.
this.myCallback= (a,b)=>{
console.info(`handle myCallback a=${a},b=${b}`)
}}
```
## How do I maximize performance in cases when a component needs to be updated for multiple times?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
Use the state management module for the purpose. Currently, the minimum update is supported. When the data dependency changes, instead of updating the entire custom component, only the view content that depends on the data is updated.
## How does this of a function in an object point to the outer layer?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
You can use the arrow function for this purpose. When a child component is initialized in the parent component, the method defined in the parent component is transferred to and invoked in the child component. This process is similar to variable transfer.
**Example** **Example**
``` ```
const obj = { class Model {
start:() => { value: string
return this.num
}
} }
```
## How do I obtain data through an API before page loading?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom**
Data needs to be obtained before page rendering so as to be rendered when needed.
**Solution**
In the **aboutToAppear** function, use an asynchronous API to obtain page data and @State to decorate related variables. After the data is obtained, the page is automatically refreshed based on the variables.
**Example**
```
@Entry @Entry
@Component @Component
struct Test6Page { struct EntryComponent {
// After the data is obtained, the page is automatically refreshed. test() {
@State message: string = 'loading.....' console.log('testTag test in my component');
aboutToAppear(){
// Simulate an asynchronous API to obtain data.
setTimeout(()=>{
this.message = 'new msg'
},3000)
} }
build() { build() {
Row() {
Column() { Column() {
Text(this.message) MyComponent({ title: { value: 'Hello World 2' }, count: 7, onClick: this.test }) // The defined method is transferred during initialization.
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
} }
.height('100%')
} }
} }
```
## Can placeholders be configured in the string.json file in the stage model?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
The **string.json** file does not support placeholders. As an alternative, you can define variables on the target page and combine these variables and **Resource** objects.
## What are the differences between .ets Files and.ts files?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
ArkTS is a superset of TypeScript. In addition to all TS features, ArkTS offers added declarative UI features, allowing you to develop high-performance applications in a more natural and intuitive manner. It is recommended that you use ArtTS for UI development and TS for service logic development.
**Reference**
[Getting Started with ArkTS](../quick-start/arkts-get-started.md)
## How do I send a verification code through email in ArkTS?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
To send a verification code, you need to request the server, which in turn calls the SMS verification code API. The SMS service can be used to implement related functions.
## How do I display sensor data in the \<Text> component on the UI in real time?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Solution**
The type of data returned by the sensor is double. To display it in the \<Text> component, first convert the data from double to string.
## How do I listen for screen rotation events?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
To listen for screen rotation events, use the **mediaquery** API.
```
import mediaquery from '@ohos.mediaquery'
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
function onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
// do something here
} else {
// do something here
}
}
listener.on('change', onPortrait) // Register a callback.
listener.off('change', onPortrait) // Deregister a callback.
```
**Reference**
[@ohos.mediaquery (Media Query)](../reference/apis/js-apis-mediaquery.md)
## What should I do if ForEach does not traverse all data after DevEco Studio is updated to the latest version?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
In the **forEach\(\)** statement, if the third parameter **keyGenerator** has a value passed in, ensure that the key generated by each element in the data source array is unique. Otherwise, the traversal cannot be performed. If the generated keys are the same, only one key can be generated.
The traversal can also be performed if **keyGenerator** is not specified, in which case the system uses the default generation mode.
## What should I do if a singleton does not take effect after the page is changed?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom**
A singleton works only in the same page. It becomes **undefined** when the page changes.
**Solution**
A JS file is generated for each page, and a defined singleton is generated in each JS file. Therefore, the singleton in applicable only to the owning page.
To share an instance across pages, it must be created at the UIAbility or application level.
## How do I convert a string in time format to a date object?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
If the string is in the yyyy-MM-dd format, you can convert it to a date object by calling **new Date\("yyyy-MM-dd"\)**.
```
new Date("2021-05-23");
new Date("2020/2/29");
new Date("2020-14-03");
new Date("14-02-2021");
```
If the string is in other formats, you can convert it to a date object by calling **new Date\(year:number,month:number,day?:number,hour?:number,minute?:number,second?:number,ms?:number\)**.
```
Syntax for creating a date based on parameters:
new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds)
```
Pass the date parameters as arguments.
- **yearValue**: the year in the ISO 8061 YYYY format, for example, **2021**. If we specify a value in YY format, it will be incorrectly accepted. For example, the value **21** would be considered the year 1921 rather than 2021.
- **IndexOfMonth**: index of the month, which starts from 0. It is obtained by subtracting 1 from the month value. For example, for March, the month value is 3, but the value of **IndexOfMonth** will be 2 (that is, 3 – 1 = 2). The value should typically be within the 0–11 range.
- **dayValue**: day of the month. It should range from 1 to 31 depending on the number of days in the month. For example, for 21-05-2021, the day value is **21**.
- **hours**: hour of the day. For example, **10** for 10 o'clock.
- **minutes**: number of minutes that have elapsed in the hour.
- **seconds**: number of seconds past a minute.
## How do I convert a string to a byte array in ArkTS?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
Refer to the following code:
```
stringToArray(str:string) {
var arr = [];
for(var i = 0,j = str.length;i<j;++i) {
arr.push(str.charCodeAt(i))
}
return arr;
}
```
## How do I implement string encoding and decoding in ArkTS?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
You can use **TextEncoder** and **TextDecoder** provided by the **util** module.
**Reference**
[TextEncoder](../reference/apis/js-apis-util.md#textencoder), [TextDecoder](../reference/apis/js-apis-util.md#textdecoder)
## How do I import and export namespaces?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
Use **import** and **export** statements.
- Exporting namespaces from the database:
```
namespace Util{
export function getTime(){
return Date.now()
}
}
export default Util
```
- Importing namespaces
```
import Util from './util'
Util.getTime()
```
## Can relational database operations be performed in the Worker thread?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Currently, the relational database (RDB) object in the UI main thread cannot be sent to the Worker thread for operations. To use the RDB in the Worker thread, you must obtain a new RDB object.
## How do I obtain files in the resource directory of an application?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
- Method 1: Use **\$r** or **\$rawfile**. This method applies to static access, during which the **resource** directory remains unchanged when the application is running.
- Method 2: Use **ResourceManager**. This method applies to dynamic access, during which the **resource** directory dynamically changes when the application is running.
**Reference**
[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md)
## How do I convert the XML format to the JSON format?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom**
The data returned by the server is encoded using Base64 in XML format and needs to be converted to the JSON format for subsequent processing.
**Solution**
Use the Base64-related APIs in the **util** module to decode data, and then use the **convertxml** module to parse data in XML format.
**Example**
```
import convertxml from '@ohos.convertxml';
import util from '@ohos.util';
@Entry
@Component @Component
struct Faq_4_31 { struct MyComponent {
@State message: string = 'base64 to JSON' @State title: Model = { value: 'Hello World' }
@State count: number = 0
onClick: any;
private toggle: string = 'Hello World'
private increaseBy: number = 1
build() { build() {
Row() {
Column() { Column() {
Text(this.message) Text(`${this.title.value}`).fontSize(30)
.fontSize(50) Button(`Click to increase count=${this.count}`)
.fontWeight(FontWeight.Bold) .margin(20)
.onClick(() => { .onClick(() => {
/ *Original data in GBK encoding // Change the count value of the internal state variable.
<?xml version="1.0" encoding="GBK"?> this.count += this.increaseBy
<data> this.onClick.call();
<asset_no>xxxxx</asset_no>
<machine_sn>xxxx</machine_sn>
<bios_id>xxxx</bios_id>
<responsible_emp_name><![CDATA[xxxx]]></responsible_emp_name>
<responsible_account><![CDATA[xxxx xxxx]]></responsible_account>
<responsible_emp_no>xxxx</responsible_emp_no>
<responsible_dept><![CDATA[xxxx]]></responsible_dept>
<user_dept><![CDATA[xxxx]]></user_dept>
<user_name><![CDATA[xxx]]></user_name>
<cur_domain_account>xxxx</cur_domain_account>
<asset_loc><![CDATA[--]]></asset_loc>
<asset_loc_cur><![CDATA[]]></asset_loc_cur>
<asset_type>1</asset_type>
<asset_use>For Outsourcing Staff/xxxx</asset_use>
<overdue_date></overdue_date>
<asset_status>xxxx</asset_status>
<asset_period>xxxx</asset_period>
<license></license>
</data>
*/
let src = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iR0JLIj8+CjxkYXRhPgo8YXNzZXRfbm8+eHh4eHg8L2Fzc2V0X25vPgo8bWFjaGluZV9zbj54eHh4PC9tYWNoaW5lX3NuPgo8Ymlvc19pZD54eHh4PC9iaW9zX2lkPgo8cmVzcG9uc2libGVfZW1wX25hbWU+PCFbQ0RBVEFbeHh4eF1dPjwvcmVzcG9uc2libGVfZW1wX25hbWU+CjxyZXNwb25zaWJsZV9hY2NvdW50PjwhW0NEQVRBW3h4eHggeHh4eF1dPjwvcmVzcG9uc2libGVfYWNjb3VudD4KPHJlc3BvbnNpYmxlX2VtcF9ubz54eHh4PC9yZXNwb25zaWJsZV9lbXBfbm8+CjxyZXNwb25zaWJsZV9kZXB0PjwhW0NEQVRBW3h4eHhdXT48L3Jlc3BvbnNpYmxlX2RlcHQ+Cjx1c2VyX2RlcHQ+PCFbQ0RBVEFbeHh4eF1dPjwvdXNlcl9kZXB0Pgo8dXNlcl9uYW1lPjwhW0NEQVRBW3h4eF1dPjwvdXNlcl9uYW1lPgo8Y3VyX2RvbWFpbl9hY2NvdW50Pnh4eHg8L2N1cl9kb21haW5fYWNjb3VudD4KPGFzc2V0X2xvYz48IVtDREFUQVstLV1dPjwvYXNzZXRfbG9jPgo8YXNzZXRfbG9jX2N1cj48IVtDREFUQVtdXT48L2Fzc2V0X2xvY19jdXI+Cjxhc3NldF90eXBlPjE8L2Fzc2V0X3R5cGU+Cjxhc3NldF91c2U+Rm9yIE91dHNvdXJjaW5nIFN0YWZmL3h4eHg8L2Fzc2V0X3VzZT4KPG92ZXJkdWVfZGF0ZT48L292ZXJkdWVfZGF0ZT4KPGFzc2V0X3N0YXR1cz54eHh4PC9hc3NldF9zdGF0dXM+Cjxhc3NldF9wZXJpb2Q+eHh4eDwvYXNzZXRfcGVyaW9kPgo8bGljZW5zZT48L2xpY2Vuc2U+CjwvZGF0YT4='
let base64 = new util.Base64Helper();
// base64 decoding
let src_uint8Array = base64.decodeSync(src);
// Decode the string into a UTF-8 string.
let textDecoder = util.TextDecoder.create("utf-8",{ignoreBOM: true})
let src_str = textDecoder.decodeWithStream(src_uint8Array)
// Replace the encoding field.
src_str = src_str.replace("GBK","utf-8")
console.log('Test src_str: ' + JSON.stringify(src_str));
//Convert XML format to JSON format.
let conv = new convertxml.ConvertXML();
let options = {trim : false, declarationKey:"_declaration",
instructionKey : "_instruction", attributesKey : "_attributes",
textKey : "_text", cdataKey:"_cdata", doctypeKey : "_doctype",
commentKey : "_comment", parentKey : "_parent", typeKey : "_type",
nameKey : "_name", elementsKey : "_elements"}
let src_json = JSON.stringify(conv.convertToJSObject(src_str, options));
console.log('Test json: ' + JSON.stringify(src_json));
}) })
} }
.width('100%')
}
.height('100%')
} }
} }
``` ```
## What is the cause of error code 401 obtained through the try/catch statement? ## How do I implement a text input box that automatically brings up the soft keyboard?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Cause** **Solution**
1. Mandatory parameters are not passed in.
2. The parameter type is incorrect.
3. The parameter is **undefined**. You can use **focusControl.requestFocus** to control the focus of the text input box. When the text input box is in focus, it automatically brings up the soft keyboard.
**Reference** **Reference**
[Universal Error Codes](../reference/errorcodes/errorcode-universal.md) [Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
# ArkUI Development (JS)
## Why can't array variables be used to control component attributes?
Applicable to: OpenHarmony (DevEco Studio 3.0.0.993, API version 8)
Currently, the web-like development paradigm does not listen for the modification of elements in an array. Therefore, the page refresh can be triggered only when the array object is modified, but not when an element in the array is modified. In the following example, the **test1\(\)** statement, which assigns values to the entire array, will disable the related **\<Button>** component; in contrast, the **test2\(\)** statement, which assigns a value to an element in the array, will not disable the **\<Button>** component. In addition to **test1\(\)**, you can also use the method of modifying the array, for example, **splice\(\)**, to trigger the page refresh.
```
test1() {this.isDisabled = [true, true, true, true, true]; // This statement disables the <Button> component.
test2() {this.isDisabled[0] = true; // This statement does not work for the <Button> component.
```
## Does the \<input> component support center alignment?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, FA model)
**Symptom**
The **text-align** style does not work for the **\<input>** component.
**Solution**
The **text-align** style works for the **\<text>** component, but not for the **\<input>** component.
**Reference**
[input](../reference/arkui-js/js-components-basic-input.md), [text](../reference/arkui-js/js-components-basic-text.md)
## How do I determine whether a value exists in a JS object?
Applicable to: OpenHarmony 3.2 Release (API version 9)
**Solution**
Use **Object.values\(*object name*\).indexOf\(*value to be checked*\)**. If **-1** is returned, the corresponding value is not included. Otherwise, the corresponding value is included.
# ArkUI Layout Development (ArkTS)
## What should I do if the height settings in position do not take effect?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
When **position** is set for a container component, it is taken out of normal flow and works independently from the outer container. In this case, the height does not take effect. You can replace the outer container with a stack to solve this issue.
## How do I implement horizontal scrolling on a \<Grid> component?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Set **rowsTemplate** (the number of rows) for the **\<Grid>** component and do not set **columnsTemplate** (the number of columns). In this way, the **\<Grid>** component scrolls horizontally when its content does not fit within its width.
## What should I do if the \<List> component cannot be dragged to the bottom when it is used with another component and does not have the size specified?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Add the **layoutWeight** attribute for the **\<List>** component so that it takes up the remaining height (or width, depending on the scrolling direction) adapatively.
By default, the **\<List>** component, as a scrollable container, takes up the entire screen height. When it is used with any component whose height is fixed, you need to explicitly add the **layoutWeight** attribute for the **\<List>** component so that it takes up the remaining height instead of the entire screen height.
## Can tab switching be disabled for the \<Tabs> component?
Applicable to: OpenHarmony 3.2 Release (API version 9)
No. This feature is not supported.
## How do I intercept the onBackPress event so that it does not trigger page return?
Applicable to: OpenHarmony 3.2 Release (API version 9)
If **true** is returned in **onBackPress**, the page executes its own return logic instead of the default return logic.
**Reference**
[onBackPress](../reference/arkui-ts/ts-custom-component-lifecycle.md#onbackpress).
## How do I implement a sticky header for a list item group in the \<List> component?
Applicable to: OpenHarmony 3.2 Release (API version 9)
You can use the **sticky** attribute of the **\<List>** component together with the **\<ListItemGroup>** component. Specifically, set the **sticky** attribute of the **\<List>** component to **StickyStyle.Header** and set the **header** parameter of the corresponding **\<ListItemGroup>** component.
**Reference**
[Adding a Sticky Header](../ui/arkts-layout-development-create-list.md#adding-a-sticky-header)
\ No newline at end of file
# ArkUI Routing/Navigation Development (ArkTS)
## Why can't class objects be transferred through params in the router API?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
Only attributes in an object can be transferred, and methods in the object cannot.
## How do I use router to implement page redirection in the stage model?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
1. To implement page redirection through **router**, add all redirected-to pages to the **pages** list in the **main\_pages.json** file.
2. Page routing APIs in **router** can be invoked only after page rendering is complete. Do not call these APIs in **onInit** or **onReady** when the page is still in the rendering phase.
**Reference**
[@ohos.router (Page Routing)](../reference/apis/js-apis-router.md)
## Will a page pushed into the stack through router.push be reclaimed?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
After being pushed to the stack through **router.push**, a page can be reclaimed only when it is popped from the stack through **router.back**.
**Reference**
[router.getParams](../reference/apis/js-apis-router.md#routergetparams)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册