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

Update docs (22084)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 83d8fa01
......@@ -34,8 +34,8 @@ interface DataChangeListener {
| Name | Type | Mandatory | Description |
| ------------- | --------------------------------------- | ---- | ---------------------------------------- |
| dataSource | IDataSource | Yes | **LazyForEach** data source. You need to implement related APIs. |
| itemGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;void | Yes | Child component generation function, which generates a child component for each data item in the array.<br>**NOTE**<br>The function body of **itemGenerator** must be included in braces {...}. **itemGenerator** can and must generate only one child component for each iteration. The **if** statement is allowed in **itemGenerator**, but you must ensure that each branch of the **if** statement creates a child component of the same type. **ForEach** and **LazyForEach** statements are not allowed in **itemGenerator**.|
| keyGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;string | No | ID generation function, which generates a unique and fixed ID for each data item in the data source. This ID must remain unchanged for the data item even when the item is relocated in the array. When the item is replaced by a new item, the ID of the new item must be different from that of the replaced item. This ID generation function is optional. However, for performance reasons, it is strongly recommended that the ID generation function be provided, so that the framework can better identify array changes. For example, if no ID generation function is provided, a reverse of an array will result in rebuilding of all nodes in **LazyForEach**.<br>**NOTE**<br>The ID generated for each data item in the data source must be unique.|
| itemGenerator | (item: any) =&gt; void | Yes | Child component generation function, which generates a child component for each data item in the array.<br>**NOTE**<br>The function body of **itemGenerator** must be included in braces {...}. **itemGenerator** can and must generate only one child component for each iteration. The **if** statement is allowed in **itemGenerator**, but you must ensure that each branch of the **if** statement creates a child component of the same type. **ForEach** and **LazyForEach** statements are not allowed in **itemGenerator**.|
| keyGenerator | (item: any) =&gt; string | No | ID generation function, which generates a unique and fixed ID for each data item in the data source. This ID must remain unchanged for the data item even when the item is relocated in the array. When the item is replaced by a new item, the ID of the new item must be different from that of the replaced item. This ID generation function is optional. However, for performance reasons, it is strongly recommended that the ID generation function be provided, so that the framework can better identify array changes. For example, if no ID generation function is provided, a reverse of an array will result in rebuilding of all nodes in **LazyForEach**.<br>**NOTE**<br>The ID generated for each data item in the data source must be unique.|
## Description of IDataSource
......@@ -52,10 +52,10 @@ interface IDataSource {
| Declaration | Parameter Type | Description |
| ---------------------------------------- | ------------------ | ------------------------------------- |
| totalCount():&nbsp;number | - | Obtains the total number of data records. |
| getData(index:&nbsp;number):&nbsp;any | number | Obtains the data record corresponding to the specified index.<br>**index**: index of the data record to obtain.|
| registerDataChangeListener(listener:DataChangeListener):&nbsp;void | DataChangeListener | Registers a listener for data changes.<br>**listener**: listener for data changes. |
| unregisterDataChangeListener(listener:DataChangeListener):&nbsp;void | DataChangeListener | Deregisters the listener for data changes.<br>**listener**: listener for data changes. |
| totalCount(): number | - | Obtains the total number of data records. |
| getData(index: number): any | number | Obtains the data record corresponding to the specified index.<br>**index**: index of the data record to obtain.|
| registerDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Registers a listener for data changes.<br>**listener**: listener for data changes. |
| unregisterDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Deregisters the listener for data changes.<br>**listener**: listener for data changes. |
## Description of DataChangeListener
......@@ -77,20 +77,20 @@ interface DataChangeListener {
| Declaration | Parameter Type | Description |
| ------------------------------------------------------------ | -------------------------------------- | ------------------------------------------------------------ |
| onDataReloaded():&nbsp;void | - | Invoked when all data is reloaded. |
| onDataAdded(index:&nbsp;number):void<sup>(deprecated)</sup> | number | Invoked when data is added to the position indicated by the specified index.<br>This API is deprecated since API version 8. You are advised to use **onDataAdd** instead.<br>**index**: index of the position where data is added.|
| onDataMoved(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void<sup>(deprecated)</sup> | from:&nbsp;number,<br>to:&nbsp;number | Invoked when data is moved.<br>This API is deprecated since API version 8. You are advised to use **onDataMove** instead.<br>**from**: original position of data; **to**: target position of data.<br>**NOTE**<br>The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.|
| onDataDeleted(index: number):void<sup>(deprecated)</sup> | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.<br>This API is deprecated since API version 8. You are advised to use **onDataDelete** instead.<br>**index**: index of the position where data is deleted.|
| onDataChanged(index:&nbsp;number):&nbsp;void<sup>(deprecated)</sup> | number | Invoked when data in the position indicated by the specified index is changed.<br>This API is deprecated since API version 8. You are advised to use **onDataChange** instead.<br>**index**: listener for data changes.|
| onDataAdd(index:&nbsp;number):&nbsp;void<sup>8+</sup> | number | Invoked when data is added to the position indicated by the specified index.<br>**index**: index of the position where data is added.|
| onDataMove(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void<sup>8+</sup> | from:&nbsp;number,<br>to:&nbsp;number | Invoked when data is moved.<br>**from**: original position of data; **to**: target position of data.<br>**NOTE**<br>The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.|
| onDataReloaded(): void | - | Invoked when all data is reloaded. |
| onDataAdd(index: number): void<sup>8+</sup> | number | Invoked when data is added to the position indicated by the specified index.<br>**index**: index of the position where data is added.|
| onDataMove(from: number, to: number): void<sup>8+</sup> | from: number,<br>to: number | Invoked when data is moved.<br>**from**: original position of data; **to**: target position of data.<br>**NOTE**<br>The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.|
| onDataDelete(index: number):void<sup>8+</sup> | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.<br>**index**: index of the position where data is deleted.<br>**NOTE**<br>Before **onDataDelete** is called, ensure that the corresponding data in **dataSource** has been deleted. Otherwise, undefined behavior will occur during page rendering.|
| onDataChange(index:&nbsp;number):&nbsp;void<sup>8+</sup> | number | Invoked when data in the position indicated by the specified index is changed.<br>**index**: index of the position where data is changed.|
| onDataChange(index: number): void<sup>8+</sup> | number | Invoked when data in the position indicated by the specified index is changed.<br>**index**: index of the position where data is changed.|
| onDataAdded(index: number):void<sup>(deprecated)</sup> | number | Invoked when data is added to the position indicated by the specified index.<br>This API is deprecated since API version 8. You are advised to use **onDataAdd** instead.<br>**index**: index of the position where data is added.|
| onDataMoved(from: number, to: number): void<sup>(deprecated)</sup> | from: number,<br>to: number | Invoked when data is moved.<br>This API is deprecated since API version 8. You are advised to use **onDataMove** instead.<br>**from**: original position of data; **to**: target position of data.<br>**NOTE**<br>The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.|
| onDataDeleted(index: number):void<sup>(deprecated)</sup> | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.<br>This API is deprecated since API version 8. You are advised to use **onDataDelete** instead.<br>**index**: index of the position where data is deleted.|
| onDataChanged(index: number): void<sup>(deprecated)</sup> | number | Invoked when data in the position indicated by the specified index is changed.<br>This API is deprecated since API version 8. You are advised to use **onDataChange** instead.<br>**index**: listener for data changes.|
## Restrictions
- **LazyForEach** must be used in the container component. Only the **\<List>**, **\<Grid>**, and **\<Swiper>** components support lazy loading (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at the same time.
- LazyForEach must be used in the container component. Only the [\<List>](../reference/arkui-ts/ts-container-list.md), [\<Grid>](../reference/arkui-ts/ts-container-grid.md), and [\<Swiper>](../reference/arkui-ts/ts-container-swiper.md) components support lazy loading (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at the same time.
- **LazyForEach** must create one and only one child component in each iteration.
......@@ -177,7 +177,7 @@ class BasicDataSource implements IDataSource {
}
class MyDataSource extends BasicDataSource {
private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3'];
private dataArray: string[] = [];
public totalCount(): number {
return this.dataArray.length;
......@@ -201,6 +201,12 @@ class MyDataSource extends BasicDataSource {
@Entry
@Component
struct MyComponent {
aboutToAppear() {
for (var i = 100; i >= 80; i--) {
this.data.pushData(`Hello ${i}`)
}
}
private data: MyDataSource = new MyDataSource();
build() {
......@@ -208,15 +214,17 @@ struct MyComponent {
LazyForEach(this.data, (item: string) => {
ListItem() {
Row() {
Image(item).width('30%').height(50)
Text(item).fontSize(20).margin({ left: 10 })
Text(item).fontSize(50)
.onAppear(() => {
console.info("appear:" + item)
})
}.margin({ left: 10, right: 10 })
}
.onClick(() => {
this.data.pushData('/path/image' + this.data.totalCount());
this.data.pushData(`Hello ${this.data.totalCount()}`);
})
}, item => item)
}
}.cachedCount(5)
}
}
```
......@@ -257,7 +257,7 @@ Defines animator options.
| Name | Type | Mandatory| Description |
| ---------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
| duration | number | Yes | Duration for playing the animation, in milliseconds. |
| easing | string | Yes | Animation interpolation curve. Only the following values are supported:<br>**"linear"**: The animation speed keeps unchanged.<br>**"ease"**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.<br>**"ease-in"**: The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.<br>**"ease-out"**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>**"ease-in-out"**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.<br>**"fast-out-slow-in"**: The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).<br>**"linear-out-slow-in"**: The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).<br>**"friction"**: The animation uses the damping cubic-bezier curve (0.2, 0.0, 0.2, 1.0).<br>**"extreme-deceleration"**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).<br>**"rhythm"**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).<br>**"sharp"**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).<br>**"smooth"**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).<br>**cubic-bezier(x1, y1, x2, y2)**: The animation uses the defined cubic-bezier curve, where the value of the input parameters must range from 0 to 1.<br>**steps(number, step-position)**: The animation uses a step curve. The **number** must be set and only an integer is supported. **step-position** is optional. It can be set to **start** or **end**. The default value is **end**.|
| easing | string | Yes | Animation interpolation curve. Only the following values are supported:<br>**"linear"**: The animation speed keeps unchanged.<br>**"ease"**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.<br>**"ease-in"**: The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.<br>**"ease-out"**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>**"ease-in-out"**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.<br>**"fast-out-slow-in"**: The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).<br>**"linear-out-slow-in"**: The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).<br>**"friction"**: The animation uses the damping cubic-bezier curve (0.2, 0.0, 0.2, 1.0).<br>**"extreme-deceleration"**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).<br>**"rhythm"**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).<br>**"sharp"**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).<br>**"smooth"**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).<br>**"cubic-bezier(x1,y1,x2,y2)"**: The animation uses the defined cubic bezier curve, where the value of **x1** and **x2** must range from 0 to 1. For example, **"cubic-bezier(0.42,0.0,0.58,1.0)"**.<br>**"steps(number,step-position)"**: The animation uses a step curve. The **number** parameter is mandatory and must be set to a positive integer. The **step-position** parameter is optional and can be set to **start** or **end** (default value). For example, **"steps(3,start)"**.|
| delay | number | Yes | Animation delay duration, in milliseconds. Value **0** means that there is no delay. |
| fill | "none" \| "forwards" \| "backwards" \| "both" | Yes | State of the animated target after the animation is executed.<br>**"none"**: No style is applied to the target before or after the animation is executed.<br>**"forwards"**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.<br>**"backwards"**: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used.<br>**"both"**: The animation follows the **forwards** and **backwards** rules.|
| direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | Yes | Animation playback mode.<br>**"normal"**: plays the animation in forward loop mode.<br>**"reverse"**: plays the animation in reverse loop mode.<br>**"alternate"**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.<br>**"alternate-reverse"**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.|
......
......@@ -608,9 +608,9 @@ Obtains the size, position, translation, scaling, rotation, and affine matrix in
**Return value**
| Type | Description |
| ------------- | ------------------------------------------------------------ |
| ComponentInfo | Size, position, translation, scaling, rotation, and affine matrix information of the component. |
| Type | Description |
| -------------------------------------------------------- | ------------------------------------------------ |
| [ComponentInfo](js-apis-arkui-componentUtils.md#componentinfo) | Size, position, translation, scaling, rotation, and affine matrix information of the component.|
**Example**
......
# @ohos.componentUtils (componentUtils)
# @ohos.arkui.componentUtils (componentUtils)
The **componentUtils** module provides API for obtaining the coordinates and size of the drawing area of a component.
......@@ -13,7 +13,7 @@ The **componentUtils** module provides API for obtaining the coordinates and siz
## Modules to Import
```js
import componentUtils from '@ohos.componentUtils'
import componentUtils from '@ohos.arkui.componentUtils'
```
## componentUtils.getRectangleById
......@@ -43,86 +43,106 @@ let modePosition = componentUtils.getRectangleById("onClick");
## ComponentInfo
| Name | Type | Description |
| ---------------|------------ | -----------------------------|
| size | [Size](#size) | Component size. |
| localOffset | [Offset](#offset) | Offset of the component relative to the parent component. |
| windowOffset | [Offset](#offset) | Offset of the component relative to the window. |
| screenOffset | [Offset](#offset) | Offset of the component relative to the screen. |
| translate | [TranslateResult](#translateresult) | Translation of the component. |
| scale | [ScaleResult](#scaleresult) | Scaling of the component. |
| rotate | [RotateResult](#rotateresult) | Rotation of the component. |
| transform | [Matrix4Result](#matrix4result) | Affine matrix of the component, which is a 4x4 matrix object created based on the input parameter. |
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
| ---------------|------------ | -----------------------------| -----------------------------|
| size | [Size](#size) | Yes| Component size. |
| localOffset | [Offset](#offset) | Yes| Offset of the component relative to the parent component. |
| windowOffset | [Offset](#offset) | Yes| Offset of the component relative to the window. |
| screenOffset | [Offset](#offset) | Yes| Offset of the component relative to the screen. |
| translate | [TranslateResult](#translateresult) | Yes| Translation of the component. |
| scale | [ScaleResult](#scaleresult) | Yes| Scaling of the component. |
| rotate | [RotateResult](#rotateresult) | Yes| Rotation of the component. |
| transform | [Matrix4Result](#matrix4result) | Yes| Affine matrix of the component, which is a 4x4 matrix object created based on the input parameter. |
### Size
| Name | Type| Description |
| -------- | ---- | ----------------------------------|
| width | number | Component width. |
| height | number | Component height. |
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type| Mandatory| Description |
| -------- | ---- | ----------------------------------| ----------------------------------|
| width | number | Yes| Component width. |
| height | number | Yes| Component height. |
### Offset
| Name | Type| Description |
| --------| ---- | -----------------------------------|
| x | number | X coordinate. |
| y | number | Y coordinate. |
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type| Mandatory| Description |
| --------| ---- | -----------------------------------| -----------------------------------|
| x | number | Yes| X coordinate. |
| y | number | Yes| Y coordinate. |
### TranslateResult
| Name | Type| Description |
| --------| ---- | -----------------------------------|
| x | number | Translation distance along the x-axis. |
| y | number | Translation distance along the y-axis. |
| z | number | Translation distance along the z-axis. |
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type| Mandatory| Description |
| --------| ---- | -----------------------------------| -----------------------------------|
| x | number | Yes| Translation distance along the x-axis. |
| y | number | Yes| Translation distance along the y-axis. |
| z | number | Yes| Translation distance along the z-axis. |
### ScaleResult
| Name | Type| Description |
| --------| ---- | -----------------------------------|
| x | number | Scale factor along the x-axis. |
| y | number | Scale factor along the y-axis. |
| z | number | Scale factor along the z-axis. |
| centerX | number | X coordinate of the center point. |
| centerY | number | Y coordinate of the center point. |
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type| Mandatory| Description |
| --------| ---- | -----------------------------------| -----------------------------------|
| x | number | Yes| Scale factor along the x-axis. |
| y | number | Yes| Scale factor along the y-axis. |
| z | number | Yes| Scale factor along the z-axis. |
| centerX | number | Yes| X coordinate of the center point. |
| centerY | number | Yes| Y coordinate of the center point. |
### RotateResult
| Name | Type| Description |
| --------| ---- | -----------------------------------|
| x | number | X coordinate of the rotation vector. |
| y | number | Y coordinate of the rotation vector. |
| z | number | Z coordinate of the rotation vector. |
| angle | number | Rotation angle. |
| centerX | number | X coordinate of the center point. |
| centerY | number | Y coordinate of the center point. |
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type| Mandatory| Description |
| --------| ---- | -----------------------------------| -----------------------------------|
| x | number | Yes| X coordinate of the rotation vector. |
| y | number | Yes| Y coordinate of the rotation vector. |
| z | number | Yes| Z coordinate of the rotation vector. |
| angle | number | Yes| Rotation angle. |
| centerX | number | Yes| X coordinate of the center point. |
| centerY | number | Yes| Y coordinate of the center point. |
### Matrix4Result
| Name | Type| Description |
| --------| ---- | -----------------------------------|
| number | number | Scale factor along the x-axis. Defaults to **1** for the identity matrix. |
| number | number | The second value, which is affected by the rotation of the x, y, and z axes.|
| number | number | The third value, which is affected by the rotation of the x, y, and z axes.|
| number | number | Meaningless value. |
| number | number | The fifth value, which is affected by the rotation of the x, y, and z axes.|
| number | number | Scale factor along the y-axis. Defaults to **1** for the identity matrix. |
| number | number | The seventh value, which is affected by the rotation of the x, y, and z axes.|
| number | number | Meaningless value. |
| number | number | The ninth value, which is affected by the rotation of the x, y, and z axes.|
| number | number | The tenth value, which is affected by the rotation of the x, y, and z axes.|
| number | number | Scale factor along the z-axis. Defaults to **1** for the identity matrix. |
| number | number | Meaningless value. |
| number | number | Translation distance along the x-axis. Defaults to **0** for the identity matrix. |
| number | number | Translation distance along the y-axis. Defaults to **0** for the identity matrix.|
| number | number | Translation distance along the z-axis. Defaults to **0** for the identity matrix.|
| number | number | Valid in homogeneous coordinates, presenting the perspective projection effect. |
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Value Range | Description |
| --------| -----------------------------------|
| [number,number,number,number,<br>number,number,number,number,<br>number,number,number,number,<br>number,number,number,number] | A number array whose length is 16 (4 x 4). For details, see **4 x 4 matrix description**.|
**4 x 4 matrix description**
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------ |
| m00 | number | Yes | Scale factor along the x-axis. Defaults to **1** for the identity matrix. |
| m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. |
| m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. |
| m03 | number | Yes | Meaningless value. |
| m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. |
| m11 | number | Yes | Scale factor along the y-axis. Defaults to **1** for the identity matrix. |
| m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. |
| m13 | number | Yes | Meaningless value. |
| m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. |
| m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. |
| m22 | number | Yes | Scale factor along the z-axis. Defaults to **1** for the identity matrix. |
| m23 | number | Yes | Meaningless value. |
| m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix.|
| m31 | number | Yes | Translation value of the y-axis, in px. The default value is **0** for the identity matrix.|
| m32 | number | Yes | Translation value of the z-axis, in px. The default value is **0** for the identity matrix.|
| m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. |
**Example**
```js
import matrix4 from '@ohos.matrix4';
import componentUtils from '@ohos.componentUtils';
import componentUtils from '@ohos.arkui.componentUtils';
@Entry
@Component
......
......@@ -78,7 +78,7 @@ Creates a step curve.
| Name| Type | Mandatory| Description |
| ------ | ------- | ----| ------------------------------------------------------------ |
| count | number | Yes | Number of steps. The value must be a positive integer.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.|
| count | number | Yes | Number of steps. The value must be a positive integer.<br>Value range: [1, +∞)<br>**NOTE**<br>A value less than 1 evaluates to the value **1**.|
| end | boolean | Yes | Whether jumping occurs when the interpolation ends.<br>- **true**: Jumping occurs when the interpolation ends.<br>- **false**: Jumping occurs when the interpolation starts.|
**Return value**
......@@ -174,7 +174,7 @@ Creates a spring animation curve. If multiple spring animations are applied to t
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| response | number | No | Duration of one complete oscillation.<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.825**.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, the **response** values of these animations will transit smoothly over this duration if they are different.<br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained using the **interpolate** function of the curve.|
......@@ -209,7 +209,7 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
| --------- | ------ | ---- | ----- |
| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained using the **interpolate** function of the curve. |
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained using the **interpolate** function of the curve.|
**Return value**
......@@ -237,16 +237,16 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| velocity | number | Yes | Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state. The velocity is the normalized velocity, and its value is equal to the actual velocity at the beginning of the animation divided by the animation attribute change value.|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
| velocity | number | Yes | Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state. The velocity is the normalized velocity, and its value is equal to the actual velocity at the beginning of the animation divided by the animation attribute change value.<br>Value range: (-∞, +∞)|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Interpolation curve.|
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the** interpolatingSpring** parameters, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained using the [interpolate](#interpolate9) function of the curve.|
**Example**
......
......@@ -54,7 +54,7 @@ struct FontExample {
// Both familyName and familySrc support the string type.
font.registerFont({
familyName: 'medium',
familySrc: '/font/medium.ttf'
familySrc: '/font/medium.ttf' // The font file is at the same level as the pages directory.
})
// Both familyName and familySrc support the Resource type.
......@@ -138,7 +138,7 @@ Obtains information about a system font based on the font name.
| ---------------- | ---------------------------- |
| FontInfo | Information about the system font. |
## FontInfo
## FontInfo<sup>10+</sup>
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -170,7 +170,7 @@ struct FontExample {
Column() {
Button("getFontByName")
.onClick(() => {
this.fontInfo = font.getFontByName('HarmonyOS Sans Italic')
this.fontInfo = font.getFontByName('Sans Italic')
console.log("getFontByName(): path = " + this.fontInfo.path)
console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName)
console.log("getFontByName(): fullName = " + this.fontInfo.fullName)
......
......@@ -27,7 +27,7 @@ Matrix constructor, which is used to create a 4 x 4 matrix by using the input pa
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| option | [number,number,number,number,<br>number,number,number,number,<br>number,number,number,number,<br>number,number,number,number] | Yes | A number array whose length is 16 (4 x 4). For details, see **Description of a 4 x 4 matrix**.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
| option | [number,number,number,number,<br>number,number,number,number,<br>number,number,number,number,<br>number,number,number,number] | Yes | A number array whose length is 16 (4 x 4). For details, see **4 x 4 matrix description**.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
**Return value**
......@@ -35,7 +35,7 @@ Matrix constructor, which is used to create a 4 x 4 matrix by using the input pa
| --------------------------------- | ---------------------------- |
| [Matrix4Transit](#matrix4transit) | 4 x 4 matrix object created based on the input parameter.|
**Description of a 4 x 4 matrix**
**4 x 4 matrix description**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------------------- |
......@@ -150,6 +150,7 @@ import matrix4 from '@ohos.matrix4'
@Component
struct Test {
private matrix1 = matrix4.identity().translate({ x: 100 })
// Perform the scale operation on the copy matrix of matrix1, which does not affect matrix1.
private matrix2 = this.matrix1.copy().scale({ x: 2 })
build() {
......@@ -305,7 +306,7 @@ This API is deprecated since API version 10.
combine(options: Matrix4Transit): Matrix4Transit
Combines the effects of two matrices to generate a new matrix object.
Combines the effects of two matrices to generate a new matrix object. The original matrix that calls this API will be changed.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -330,8 +331,8 @@ import matrix4 from '@ohos.matrix4'
@Entry
@Component
struct Test {
private matrix1 = matrix4.identity().translate({ x: 200 }).copy()
private matrix2 = matrix4.identity().scale({ x: 2 }).copy()
private matrix1 = matrix4.identity().translate({ x: 200 })
private matrix2 = matrix4.identity().scale({ x: 2 })
build() {
Column() {
......@@ -342,7 +343,7 @@ struct Test {
.margin({ top: 50 })
// Translate the x-axis by 200px, and then scale it twice to obtain the resultant matrix.
Image($r("app.media.icon"))
.transform(this.matrix1.combine(this.matrix2))
.transform(this.matrix1.copy().combine(this.matrix2))
.width("40%")
.height(100)
.margin({ top: 50 })
......@@ -358,7 +359,7 @@ struct Test {
invert(): Matrix4Transit
Inverts this matrix object.
Inverts this matrix object. The original matrix that calls this API will be changed.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -374,7 +375,7 @@ Inverts this matrix object.
import matrix4 from '@ohos.matrix4'
// The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
let matrix1 = matrix4.identity().scale({ x: 2 })
let matrix2 = matrix1.invert()
let matrix2 = matrix1.copy().invert()
@Entry
@Component
......@@ -401,7 +402,7 @@ struct Tests {
translate(options: TranslateOption): Matrix4Transit
Translates this matrix object along the x, y, and z axes.
Translates this matrix object along the x, y, and z axes. The original matrix that calls this API will be changed.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -446,7 +447,7 @@ struct Test {
scale(options: ScaleOption): Matrix4Transit
Scales this matrix object along the x, y, and z axes.
Scales this matrix object along the x, y, and z axes. The original matrix that calls this API will be changed.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -490,7 +491,7 @@ struct Test {
rotate(options: RotateOption): Matrix4Transit
Rotates this matrix object along the x, y, and z axes.
Rotates this matrix object along the x, y, and z axes. The original matrix that calls this API will be changed.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -604,9 +605,9 @@ struct Test {
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------------ |
| x | number | No | Scaling multiple along the x-axis. If the value is greater than 1, the image is scaled up along the x-axis. If the value is less than 1, the image is scaled down along the x-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| y | number | No | Scaling multiple along the y-axis. If the value is greater than 1, the image is scaled up along the y-axis. If the value is less than 1, the image is scaled down along the y-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| z | number | No | Scaling multiple along the z-axis. If the value is greater than 1, the image is scaled up along the z-axis. If the value is less than 1, the image is scaled down along the z-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| x | number | No | Scaling multiple along the x-axis. x > 1: The image is scaled up along the x-axis.<br>0 < x < 1: The image is scaled down along the x-axis.<br>x < 0: The image is scaled in the reverse direction of the x-axis.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| y | number | No | Scaling multiple along the y-axis. y > 1: The image is scaled up along the y-axis.<br>0 < y < 1: The image is scaled down along the y-axis.<br>y < 0: The image is scaled in the reverse direction of the y-axis.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| z | number | No | Scaling multiple along the z-axis. z > 1: The image is scaled up along the z-axis.<br>0 < z < 1: The image is scaled down along the z-axis.<br>z < 0: The image is scaled in the reverse direction of the z-axis.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
......@@ -616,9 +617,9 @@ struct Test {
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------- |
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **0**<br>Value range: (-∞, +∞)<br>**NOTE**<br>The rotation axis vector is valid only when at least one of **x**, **y**, and **z** is not 0.|
| angle | number | No | Rotation angle.<br>Default value: **0** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0** |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0** |
......@@ -2,9 +2,7 @@
> **NOTE**
>
> - The APIs of this module are no longer maintained since API version 7. You are advised to use the new APIs.
>
> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
......@@ -14,14 +12,15 @@
import app from '@system.app'
```
## App
## app.getInfo
### getInfo
getInfo(): AppResponse
static getInfo(): AppResponse
Obtains the declared information in the **config.json** file of an application.
You are advised to use [@ohos.bundle](js-apis-Bundle.md) since API version 7.
This API is deprecated since API version 9. You are advised to use [bundleManager.getApplicationInfo](js-apis-bundleManager.md#bundlemanagergetapplicationinfo) instead.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite
......@@ -42,9 +41,9 @@ export default {
}
```
## app.terminate
### terminate
terminate(): void
static terminate(): void
Terminates the current ability.
......@@ -61,37 +60,9 @@ export default {
}
}
```
## app.requestFullWindow
### setImageCacheCount<sup>7+</sup>
requestFullWindow(options?: RequestFullWindowOptions): void
Requests the application to run in full window. You can call this API when the FA runs in a non-full window, for example, semi-modal FA. This API is invalid for an application already in full-window mode.
You are advised to use [@ohos.window](js-apis-window.md) since API version 7.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [RequestFullWindowOptions](#requestfullwindowoptions) | No| Duration for transition from the non-full window to the full window, in milliseconds. By default, the value is in direct proportion to the distance between the non-full window and the full window.|
**Example**
```ts
export default {
requestFullWindow() {
app.requestFullWindow({
duration: 200
})
}
}
```
## app.setImageCacheCount<sup>7+</sup>
setImageCacheCount(value: number): void
static setImageCacheCount(value: number): void
Sets the maximum number of decoded images that can be cached in the memory to speed up the loading of images from the same sources. If the input parameter is not set, the default value **0** is used, indicating that images are not cached. The built-in Least Recently Used (LRU) policy is used for caching. If the maximum number is exceeded, the images that have not been updated for the longest time will be removed. You are advised to set the parameter based on the application memory requirements. If the number of images is too large, the memory usage may be too high.
......@@ -120,9 +91,9 @@ export default {
}
```
## app.setImageRawDataCacheSize<sup>7+</sup>
### setImageRawDataCacheSize<sup>7+</sup>
setImageRawDataCacheSize(value: number): void
static setImageRawDataCacheSize(value: number): void
Sets the maximum size (in bytes) of the image data cached in the memory before decoding to speed up the loading of images from the same sources. If the input parameter is not set, the default value **0** is used, indicating that images are not cached. The LRU policy is used for caching. If the maximum size is exceeded, the images that have not been updated for the longest time will be removed. You are advised to set the parameter based on the application memory requirements. If the image cache is too large, the memory usage may be too high.
......@@ -152,9 +123,9 @@ export default {
}
```
## app.setImageFileCacheSize<sup>7+</sup>
### setImageFileCacheSize<sup>7+</sup>
setImageFileCacheSize(value: number): void
static setImageFileCacheSize(value: number): void
Sets the maximum size of the image file cache (in bytes) to speed up the loading of images from the same sources, especially online image sources and thumbnails. If the input parameter is not set, the default value 100 MB is used. The LRU policy is used for caching. If the maximum size is exceeded, the images that have not been updated for the longest time will be removed. You are advised to set the parameter based on the application memory requirements. If the image cache is too large, the disk usage may be too high.
......@@ -184,32 +155,60 @@ export default {
}
```
## AppResponse
### ScreenOnVisible<sup>(deprecated)</sup>
Defines the application response information.
static screenOnVisible(options?: ScreenOnVisibleOptions): void
**System capability**: The items in the table below require different system capabilities. For details, see the table.
Defines whether to keep the application visible when the screen is woken up.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- |-------- |
| appID<sup>6+</sup> | string | Yes| Bundle name of an application. It uniquely identifies the application.<br> **System capability**: SystemCapability.ArkUI.ArkUI.Full|
| appName | string | Yes| Application name.<br> **System capability**: SystemCapability.ArkUI.ArkUI.Lite|
| versionName | string | Yes| Application version name.<br> **System capability**: SystemCapability.ArkUI.ArkUI.Lite|
| versionCode | number | Yes| Application version number.<br> **System capability**: SystemCapability.ArkUI.ArkUI.Lite|
This API is deprecated since API Version 8.
## ScreenOnVisible<sup>(deprecated)</sup>
**System capability**: SystemCapability.ArkUI.ArkUI.Full
screenOnVisible(options?: ScreenOnVisibleOptions):&nbsp;void
| Name | Type | Mandatory| Description |
| ------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ |
| options | [ScreenOnVisibleOptions](#screenonvisibleoptions) | No | With keep-alive, the system is prevented from returning to the home screen when the screen is locked, so that the application is visible when the screen is woken up.|
Defines whether to keep the application visible when the screen is woken up.
### requestFullWindow<sup>(deprecated)</sup>
This API is deprecated since API Version 8.
static requestFullWindow(options?: RequestFullWindowOptions): void
Requests the application to run in full window. You can call this API when the FA runs in a non-full window, for example, semi-modal FA. This API is invalid for an application already in full-window mode.
You are advised to use [@ohos.window](js-apis-window.md) since API version 7.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------ |
| options | [RequestFullWindowOptions](#requestfullwindowoptions) | No | Duration for transition from the non-full window to the full window, in milliseconds. By default, the value is in direct proportion to the distance between the non-full window and the full window.|
**Example**
```ts
export default {
requestFullWindow() {
app.requestFullWindow({
duration: 200
})
}
}
```
## AppResponse
Defines the application response information.
**System capability**: The items in the table below require different system capabilities. For details, see the table.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- |-------- |
| options | ScreenOnVisibleOptions | No| With keep-alive, the system is prevented from returning to the home screen when the screen is locked, so that the application is visible when the screen is woken up. |
| appID<sup>6+</sup> | string | Yes| Bundle name of an application. It uniquely identifies the application.<br> **System capability**: SystemCapability.ArkUI.ArkUI.Full|
| appName | string | Yes| Application name.<br> **System capability**: SystemCapability.ArkUI.ArkUI.Lite|
| versionName | string | Yes| Application version name.<br> **System capability**: SystemCapability.ArkUI.ArkUI.Lite|
| versionCode | number | Yes| Application version number.<br> **System capability**: SystemCapability.ArkUI.ArkUI.Lite|
## ScreenOnVisibleOptions
......
......@@ -4,7 +4,7 @@ The **PromptAction** module provides APIs for creating and showing toasts, dialo
> **NOTE**
>
> - The APIs of this module are no longer maintained since API version 8. You are advised to use [`@ohos.prompt`](js-apis-prompt.md) instead.
> - The APIs of this module are deprecated since API version 8. You are advised to use [@ohos.promptAction](js-apis-promptAction.md) instead.
>
>
> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
......
......@@ -33,7 +33,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
```
import router from '@system.router';
import router from '@ohos.router';
```
- Code reference
......@@ -51,7 +51,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
| Attribute | Type | Description |
| ----- | --------------- | ---------------------------------------- |
| data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).<br>|
| $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element). |
| $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element).|
## Obtaining a DOM Element
......@@ -94,7 +94,7 @@ Use **$refs** to obtain a DOM element.
## Lifecycle APIs
- Page lifecycle APIs
| Name | Type | Parameter | Return Value | Description | Triggered When |
| Name | Type | Parameter | Return Value | Description | Triggered When |
| --------- | -------- | ---- | ---- | ------ | ------------------- |
| onInit | Function | N/A | N/A | Listens for page initialization. | Page initialization is complete. This API is called only once in the page lifecycle.|
| onReady | Function | N/A | N/A | Listens for page creation.| A page is created. This API is called only once in the page lifecycle. |
......@@ -116,7 +116,7 @@ Use **$refs** to obtain a DOM element.
- Show background page A on the foreground: onShow()
- Application lifecycle APIs
| Name | Type | Parameter | Return Value | Description | Triggered When |
| Name | Type | Parameter | Return Value | Description | Triggered When |
| --------- | -------- | ---- | ---- | ---- | --------- |
| onCreate | Function | N/A | N/A | Listens for application creation.| The application is created.|
| onDestroy | Function | N/A | N/A | Listens for application exit.| The application exits.|
......@@ -16,7 +16,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
| duration | number | No | Animation duration, in ms.<br>Default value: **1000**<br>Unit: ms<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>- The maximum animation duration on an ArkTS widget is 1000 ms.<br>- A value less than 0 evaluates to the value **0**.<br>- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.|
| tempo | number | No | Animation playback speed. A larger value indicates a higher animation playback speed.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| curve | string \| [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>9+</sup> | No | Animation curve. The default curve is linear.<br>Default value: **Curve.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.|
| curve | string \| [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>9+</sup> | No | Animation curve.<br>Default value: **Curve.EaseInOut**<br>Since API version 9, this API is supported in ArkTS widgets.|
| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.<br>Default value: **0**<br>Value range: [0, +∞)<br>**NOTE**<br>- A value less than 0 evaluates to the value **0**.<br>- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.|
| iterations | number | No | Number of times that the animation is played.<br>Default value: **1**<br>Value range: [-1, +∞)<br>**NOTE**<br>The value **-1** indicates that the animation is played for an unlimited number of times. The value **0** indicates that no animation is applied.|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.<br>For details about the restrictions, see **Notes about PlayMode**.|
......
......@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| group | string | No| Group name.|
| group | string | No| Group name.<br>**NOTE**<br>If there are multiple check box groups with the same group name, only the first check box group takes effect.|
## Attributes
......
# ColumnSplit
The **\<ColumnSplit>** component lays out child components vertically and inserts a horizontal divider between components.
The **\<ColumnSplit>** component lays out child components vertically and inserts a horizontal divider between every two child components.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
Supported
## APIs
ColumnSplit()
......@@ -20,17 +17,24 @@ ColumnSplit()
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| resizeable | boolean | Whether the divider can be dragged.<br/>Default value: **false** |
| Name | Type | Description |
|-----------------------|-------------------------------------------------------------------|---------------------------------|
| resizeable | boolean | Whether the divider can be dragged.<br/>Default value: **false** |
| divider<sup>10+</sup> | [ColumnSplitDividerStyle](#columnsplitdividerstyle10) \| null | Margin of the divider.<br>- **DividerStyle**: distance between the divider and the child component above or below it.<br>- Default value: **null**, indicating that the top and bottom margins of the divider are 0.|
## ColumnSplitDividerStyle<sup>10+</sup>
| Name | Type | Mandatory| Description |
| ----------- | ------------- | ---- |--------------------------|
| startMargin | [Dimension](ts-types.md#dimension10) | No | Distance between the divider and the child component above it.<br>Default value: **0**|
| endMargin | [Dimension](ts-types.md#dimension10) | No | Distance between the divider and the child component below it.<br>Default value: **0**|
> **NOTE**
>
> Similar to **\<RowSplit>**, the divider of **\<ColumnSplit>** can be dragged to a position that just fully holds a component.
>
> Dragging is not supported in the Previewer. Check the drag effect on a real device.
> Similar to **\<RowSplit>**, the divider of **\<ColumnSplit>** can change the height of the upper and lower child components, but only to the extent that the resultant height falls within the maximum and minimum heights of the child components.
>
> The universal attributes **clip** and **margin** are not supported.
> Universal attributes such as **clip** and **margin** are supported. If **clip** is not set, the default value **true** is used.
## Example
......
# RowSplit
The **\<RowSplit>** lays out child components horizontally and inserts a vertical divider between child components.
The **\<RowSplit>** lays out child components horizontally and inserts a vertical divider between every two child components.
> **NOTE**
>
......@@ -19,15 +19,13 @@ RowSplit()
| Name| Type| Description|
| -------- | -------- | -------- |
| resizeable | boolean | Whether the divider can be dragged.<br>Default value: **false** |
| resizeable | boolean | Whether the divider can be dragged.<br/>Default value: **false** |
> **NOTE**
>
> Similar to **\<RowSplit>**, the divider of **\<RowSplit>** can be dragged to a position that just fully holds a component.
>
> Dragging is not supported in the Previewer. Check the drag effect on a real device.
> The divider of **\<RowSplit>** can change the width of the left and right child components, but only to the extent that the resultant width falls within the maximum and minimum widths of the child components.
>
> The universal attributes **clip** and **margin** are not supported.
> Universal attributes such as **clip** and **margin** are supported. If **clip** is not set, the default value **true** is used.
## Example
......@@ -54,4 +52,4 @@ struct RowSplitExample {
}
```
![en-us_image_0000001212058482](figures/en-us_image_0000001212058482.gif)
![en-us_image_0000001219982729](figures/en-us_image_0000001219982729.gif)
......@@ -25,7 +25,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| -------- | -------- | -------- |
| duration | number | Animation duration, in ms.<br>Default value: **1000**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>- The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used.<br>- A value less than 0 evaluates to the value **0**.<br>- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.|
| tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.<br>Default value: **1.0**<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.<br>Default value: **Curve.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.|
| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.<br>Default value: **Curve.EaseInOut**<br>Since API version 9, this API is supported in ArkTS widgets.|
| delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.<br>Default value: **0**<br>**NOTE**<br>- A value less than 0 evaluates to the value **0**.<br>- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.|
| iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.<br>For details about the restrictions, see **Notes about PlayMode**.|
......
......@@ -9,9 +9,9 @@ The motion path animation is used to animate a component along a custom path.
## Attributes
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| motionPath | {<br>path:&nbsp;string,<br>from?:&nbsp;number,<br>to?:&nbsp;number,<br>rotatable?:&nbsp;boolean<br>}<br>**NOTE**<br>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br>'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'<br>For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {<br>'',<br>0.0,<br>1.0,<br>false<br>} | Motion path of the component.<br>- **path**: motion path of the translation animation. The value is an SVG path string.<br>- **from**: start point of the motion path.<br>Default value: **0.0**<br>Value range: [0, 1]<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>- **to**: end point of the motion path.<br>Default value: **1.0**<br>Value range: [0, 1]<br>A value less than 0 evaluates to the value **0**. A value larger than 1 evaluates to the value **1**.<br>- **rotatable**: whether to rotate along the path. |
| Name| Type| Description|
| -------- | -------- | -------- |
| motionPath | {<br>path: string,<br>from?: number,<br>to?: number,<br>rotatable?: boolean<br>} | Motion path of the component.<br>- **path**: motion path of the translation animation. The value is an SVG path string. In the value, **start** and **end** can be used in place of the start point and end point, for example, **'Mstart.x start.y L50 50 Lend.x end.y Z'**. For details, see [Path Drawing](../../ui/ui-js-components-svg-path.md).<br>If this parameter is set to an empty string, the path animation is not set.<br>- **from**: start point of the motion path.<br>Default value: **0.0**<br>Value range: [0, 1]<br>A value less than 0 or greater than 1 evaluates to the default value **0**.<br>- **to**: end point of the motion path.<br>Default value: **1.0**<br>Value range: [0, 1]<br>A value less than 0 or greater than 1 evaluates to the default value **1**, provided that the value of **to** is greater than or equal to the value of **from**.<br>- **rotatable**: whether to rotate along the path.<br>Default value: **false**|
## Example
......
# Arkcompiler Subsystem Changelog
# ArkCompiler Subsystem Changelog
## cl.arkcompiler.1 -- Removing of ts2abc compiler in sdk
## cl.arkcompiler.1 Removal of ts2abc Compiler from SDK
The composition of Arkcompiler in sdk was ts2abc compiler and es2abc compiler, supporting compilation of ets/js files. The ts2abc compiler has been removed from sdk since this version, thus it can't be used for abc file generation. Developers can view the corresponding changes in directory ets\build-tools\ets-loader\bin and directory js\build-tools\ets-loader\bin of sdk as presented in the picture below.
ArkCompiler in the SDK included the ts2abc and es2abc compilers for compilation of .ets and .js files. Since this version, the ts2abc compiler has been removed. You can check the changes shown below in the **ets\build-tools\ets-loader\bin** and **js\build-tools\ets-loader\bin** directories of the SDK.
![stack](figures/api10_sdk_arkcompiler_component_change.png)
**Change Impacts**
After updating the sdk, developing through DevEco will not be influenced. However, if developing scripts to use ts2abc compiler for abc file generation, one should switch to es2abc compiler
**Change Impact**
This change does not affect your development in DevEco Studio. If you use scripts to generate ABC files, use the es2abc compiler instead of es2abc.
**Key API/Component Changes**
The ts2abc compiler related components are removed from sdk
The ts2abc related components are removed from the SDK.
**Adaptation Guide**
1. For developers using DevEco for application developing, the removing of ts2abc compiler has no influence.
2. For developers writing scripts to use ts2abc compiler need to switch to es2abc compiler. Details of usage of es2abc compiler and the comparison between es2abc and ts2abc can be referred at[usage guideline of es2abc and comparison between es2abc and ts2abc](https://gitee.com/openharmony/arkcompiler_ets_frontend#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E). Assuming a.js as the target js file for compilation. For the scenario of abc generation, which is of the highest frequency, comparison of using es2abc compiler and ts2abc are present as below:
- script mode
1. If you are using DevEco Studio for application development, the removal of the ts2abc compiler has no influence.
2. If you are writing scripts to use the ts2abc compiler, you'll need switch to the es2abc compiler. For details about how to use the es2abc compiler and its comparison with the ts2abc compiler, see [Usage Guidelines](https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/README.md#usage-guidelines). Assume that **a.js** is the target .js file for compilation. For ABC file generation, which is the most frequently encountered scenario, the compilation commands are as follows:
- Compilation in script mode
1. es2abc: es2abc a.js --output a.abc
2. ts2abc: node --expose-gc pathToIndex/index.js a.js --output a.abc
- module mode
- Compilation in module mode
1. es2abc: es2abc a.js --module --output a.abc
2. ts2abc: node --expose-gc pathToIndex/index.js a.js --module --output a.abc
\ No newline at end of file
2. ts2abc: node --expose-gc pathToIndex/index.js a.js --module --output a.abc
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册