未验证 提交 81a58935 编写于 作者: O openharmony_ci 提交者: Gitee

!23637 【4.0-Beta2】翻译完成 21843+21796+21953+21949+21880+22216+23491:推送4.0 Beta2版本说明及相关文件+更新文档

Merge pull request !23637 from ester.zhou/C42-21843
...@@ -81,7 +81,7 @@ The following describes how to use the **\<XComponent>** to call the native APIs ...@@ -81,7 +81,7 @@ The following describes how to use the **\<XComponent>** to call the native APIs
// ... // ...
``` ```
2. Register the N-API module. For details, see [Using Native APIs in Application Projects](https://gitee.com/openharmony/docs/blob/master/en/application-dev/napi/napi-guidelines.md). 2. Register the N-API module. For details, see [Using Native APIs in Application Projects](napi-guidelines.md).
```c++ ```c++
// In the napi_init.cpp file, use the Init method to register the target function to transfer the encapsulated C++ methods for the JS side to call. // In the napi_init.cpp file, use the Init method to register the target function to transfer the encapsulated C++ methods for the JS side to call.
......
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
The decorators described in the previous topics are used to share state variables within a page, that is, within a component tree. If you want to share state data at the application level or across multiple pages, you would need to apply application-level state management. ArkTS provides a wide variety of application state management capabilities: The decorators described in the previous topics are used to share state variables within a page, that is, within a component tree. If you want to share state data at the application level or across multiple pages, you would need to apply application-level state management. ArkTS provides a wide variety of application state management capabilities:
- [LocalStorage](arkts-localstorage.md): API for storing the UI state, usually used for state sharing within a [UIAbility](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-app-ability-uiAbility.md) or between pages. - [LocalStorage](arkts-localstorage.md): API for storing the UI state, usually used for state sharing within a [UIAbility](../reference/apis/js-apis-app-ability-uiAbility.md) or between pages.
- [AppStorage](arkts-appstorage.md): special, singleton LocalStorage object within the application, which is created by the UI framework at application startup and provides the central storage for application UI state attributes. - [AppStorage](arkts-appstorage.md): special, singleton LocalStorage object within the application, which is created by the UI framework at application startup and provides the central storage for application UI state attributes.
- [PersistentStorage](arkts-persiststorage.md): API for persisting application attributes. It is usually used together with AppStorage to persist selected AppStorage attributes to the disk so that their values are the same upon application re-start as they were when the application was closed. - [PersistentStorage](arkts-persiststorage.md): API for persisting application attributes. It is usually used together with AppStorage to persist selected AppStorage attributes to the disk so that their values are the same upon application re-start as they were when the application was closed.
- [Environment](arkts-environment.md): a range of environment parameters regarding the device where the application runs. The environment parameters are synchronized to the AppStorage and can be used together with the AppStorage. - [Environment](arkts-environment.md): a range of environment parameters regarding the device where the application runs. The environment parameters are synchronized to AppStorage and can be used together with AppStorage.
...@@ -21,14 +21,14 @@ Syntax: ...@@ -21,14 +21,14 @@ Syntax:
```ts ```ts
@Builder myBuilderFunction({ ... }) @Builder MyBuilderFunction({ ... })
``` ```
Usage: Usage:
```ts ```ts
this.myBuilderFunction({ ... }) this.MyBuilderFunction({ ... })
``` ```
- Defining one or more custom builder (\@Builder decorated) functions inside a custom component is allowed. Such a custom builder function can be considered as a private, special type of member functions of that component. - Defining one or more custom builder (\@Builder decorated) functions inside a custom component is allowed. Such a custom builder function can be considered as a private, special type of member functions of that component.
...@@ -66,7 +66,7 @@ There are two types of parameter passing for custom builder functions: [by-value ...@@ -66,7 +66,7 @@ There are two types of parameter passing for custom builder functions: [by-value
- The parameter type must be the same as the declared parameter type. The **undefined** or **null** constants as well as expressions evaluating to these values are not allowed. - The parameter type must be the same as the declared parameter type. The **undefined** or **null** constants as well as expressions evaluating to these values are not allowed.
- All parameters are immutable inside the custom builder function. If mutability and synchronization of the mutation is required, the custom builder should be replaced by a custom component with a [@Link](arkts-link.md) decorated variable. - All parameters are immutable inside the@Builder decorated function.
- The \@Builder function body follows the same [syntax rules](arkts-create-custom-components.md#build-function) as the **build** function. - The \@Builder function body follows the same [syntax rules](arkts-create-custom-components.md#build-function) as the **build** function.
......
...@@ -24,7 +24,7 @@ Persistence of data is a relatively slow operation. Applications should avoid th ...@@ -24,7 +24,7 @@ Persistence of data is a relatively slow operation. Applications should avoid th
The preceding situations may overload the change process of persisted data. As a result, the PersistentStorage implementation may limit the change frequency of persisted attributes. The preceding situations may overload the change process of persisted data. As a result, the PersistentStorage implementation may limit the change frequency of persisted attributes.
PersistentStorage is associated with UIContext and can be called to persist data only when [UIContext](../reference/apis/js-apis-arkui-UIContext.md#uicontext) is specified. The context can be identified in [runScopedTask](../reference/apis/js-apis-arkui-UIContext.md#runscopedtask). PersistentStorage can be called to persist data only when the [UIContext](../reference/apis/js-apis-arkui-UIContext.md#uicontext), which can be obtained through [runScopedTask](../reference/apis/js-apis-arkui-UIContext.md#runscopedtask), is specified.
## Application Scenarios ## Application Scenarios
......
...@@ -3,6 +3,9 @@ ...@@ -3,6 +3,9 @@
**ForEach** enables repeated content based on array-type data. **ForEach** enables repeated content based on array-type data.
> **NOTE**
>
> Since API version 9, this API is supported in ArkTS widgets.
## API Description ## API Description
...@@ -19,15 +22,15 @@ ForEach( ...@@ -19,15 +22,15 @@ ForEach(
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------------- | ---------------------------------------- | ---- | ---------------------------------------- | | ------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| arr | Array | Yes | An array, which can be empty, in which case no child component is created. The functions that return array-type values are also allowed, for example, **arr.slice (1, 3)**. The set functions cannot change any state variables including the array itself, such as **Array.splice**, **Array.sort**, and **Array.reverse**.| | arr | Array | Yes | An array, which can be empty, in which case no child component is created. The functions that return array-type values are also allowed, for example, **arr.slice (1, 3)**. The set functions cannot change any state variables including the array itself, such as **Array.splice**, **Array.sort**, and **Array.reverse**.|
| itemGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void | Yes | A lambda function used to generate one or more child components for each data item in an array. Each component and its child component list must be contained in parentheses.<br>**NOTE**<br>- The type of the child component must be the one allowed inside the parent container component of **ForEach**. For example, a **\<LitemItem>** child component is allowed only when the parent container component of **ForEach** is **\<List>**.<br>- The child build function is allowed to return an **if** or another **ForEach**. **ForEach** can be placed inside **if**.<br>- The optional **index** parameter should only be specified in the function signature if used in its body.| | itemGenerator | (item: any, index?: number) =&gt; void | Yes | A lambda function used to generate one or more child components for each data item in an array. Each component and its child component list must be contained in parentheses.<br>**NOTE**<br>- The type of the child component must be the one allowed inside the parent container component of **ForEach**. For example, a **\<ListItem>** child component is allowed only when the parent container component of **ForEach** is **\<List>**.<br>- The child build function is allowed to return an **if** or another **ForEach**. **ForEach** can be placed inside **if**.<br>- The optional **index** parameter should only be specified in the function signature if used in its body.|
| keyGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;string | No | An anonymous function used to generate a unique and fixed key value for each data item in an array. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. For example, if no key-value generator is provided, a reverse of an array will result in rebuilding of all nodes in **ForEach**.<br>**NOTE**<br>- Two items inside the same array must never work out the same ID.<br>- If **index** is not used, an item's ID must not change when the item's position within the array changes. However, if **index** is used, then the ID must change when the item is moved within the array.<br>- When an item is replaced by a new one (with a different value), the ID of the replaced and the ID of the new item must be different.<br>- When **index** is used in the build function, it should also be used in the ID generation function.<br>- The ID generation function is not allowed to mutate any component state.| | keyGenerator | (item: any, index?: number) =&gt; string | No | An anonymous function used to generate a unique and fixed key value for each data item in an array. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. For example, if no key-value generator is provided, a reverse of an array will result in rebuilding of all nodes in **ForEach**.<br>**NOTE**<br>- Two items inside the same array must never work out the same ID.<br>- If **index** is not used, an item's ID must not change when the item's position within the array changes. However, if **index** is used, then the ID must change when the item is moved within the array.<br>- When an item is replaced by a new one (with a different value), the ID of the replaced and the ID of the new item must be different.<br>- When **index** is used in the build function, it should also be used in the ID generation function.<br>- The ID generation function is not allowed to mutate any component state.|
## Restrictions ## Restrictions
- **ForEach** must be used in container components. - **ForEach** must be used in container components.
- The type of the child component must be the one allowed inside the parent container component of **ForEach**. - The type of the child component must be the one allowed inside the parent container component of **ForEach**.
- The **itemGenerator** function can contain an **if/else** statement, and an **if/else** statement can contain **ForEach**. - The **itemGenerator** function can contain an **if/else** statement, and an **if/else** statement can contain **ForEach**.
......
...@@ -34,8 +34,8 @@ interface DataChangeListener { ...@@ -34,8 +34,8 @@ interface DataChangeListener {
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------------- | --------------------------------------- | ---- | ---------------------------------------- | | ------------- | --------------------------------------- | ---- | ---------------------------------------- |
| dataSource | IDataSource | Yes | **LazyForEach** data source. You need to implement related APIs. | | 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**.| | 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:&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.| | 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 ## Description of IDataSource
...@@ -52,10 +52,10 @@ interface IDataSource { ...@@ -52,10 +52,10 @@ interface IDataSource {
| Declaration | Parameter Type | Description | | Declaration | Parameter Type | Description |
| ---------------------------------------- | ------------------ | ------------------------------------- | | ---------------------------------------- | ------------------ | ------------------------------------- |
| totalCount():&nbsp;number | - | Obtains the total number of data records. | | totalCount(): 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.| | 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):&nbsp;void | DataChangeListener | Registers a listener for data changes.<br>**listener**: listener for data changes. | | registerDataChangeListener(listener:DataChangeListener): 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. | | unregisterDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Deregisters the listener for data changes.<br>**listener**: listener for data changes. |
## Description of DataChangeListener ## Description of DataChangeListener
...@@ -77,20 +77,20 @@ interface DataChangeListener { ...@@ -77,20 +77,20 @@ interface DataChangeListener {
| Declaration | Parameter Type | Description | | Declaration | Parameter Type | Description |
| ------------------------------------------------------------ | -------------------------------------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | -------------------------------------- | ------------------------------------------------------------ |
| onDataReloaded():&nbsp;void | - | Invoked when all data is reloaded. | | onDataReloaded(): 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.| | 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.|
| 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.| | 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.|
| 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.|
| 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.| | 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 ## 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. - **LazyForEach** must create one and only one child component in each iteration.
...@@ -177,7 +177,7 @@ class BasicDataSource implements IDataSource { ...@@ -177,7 +177,7 @@ class BasicDataSource implements IDataSource {
} }
class MyDataSource extends BasicDataSource { class MyDataSource extends BasicDataSource {
private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3']; private dataArray: string[] = [];
public totalCount(): number { public totalCount(): number {
return this.dataArray.length; return this.dataArray.length;
...@@ -201,6 +201,12 @@ class MyDataSource extends BasicDataSource { ...@@ -201,6 +201,12 @@ class MyDataSource extends BasicDataSource {
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
aboutToAppear() {
for (var i = 100; i >= 80; i--) {
this.data.pushData(`Hello ${i}`)
}
}
private data: MyDataSource = new MyDataSource(); private data: MyDataSource = new MyDataSource();
build() { build() {
...@@ -208,15 +214,17 @@ struct MyComponent { ...@@ -208,15 +214,17 @@ struct MyComponent {
LazyForEach(this.data, (item: string) => { LazyForEach(this.data, (item: string) => {
ListItem() { ListItem() {
Row() { Row() {
Image(item).width('30%').height(50) Text(item).fontSize(50)
Text(item).fontSize(20).margin({ left: 10 }) .onAppear(() => {
console.info("appear:" + item)
})
}.margin({ left: 10, right: 10 }) }.margin({ left: 10, right: 10 })
} }
.onClick(() => { .onClick(() => {
this.data.pushData('/path/image' + this.data.totalCount()); this.data.pushData(`Hello ${this.data.totalCount()}`);
}) })
}, item => item) }, item => item)
} }.cachedCount(5)
} }
} }
``` ```
...@@ -45,12 +45,12 @@ If the style of each component needs to be set separately, this will result in a ...@@ -45,12 +45,12 @@ If the style of each component needs to be set separately, this will result in a
```ts ```ts
@Component @Component
struct FancyUse { struct FancyUse {
@State heightVlaue: number = 100 @State heightValue: number = 100
@Styles fancy() { @Styles fancy() {
.height(this.heightVlaue) .height(this.heightValue)
.backgroundColor(Color.Yellow) .backgroundColor(Color.Yellow)
.onClick(() => { .onClick(() => {
this.heightVlaue = 200 this.heightValue = 200
}) })
} }
} }
...@@ -77,14 +77,14 @@ The following example demonstrates the usage of \@Styles inside and outside a co ...@@ -77,14 +77,14 @@ The following example demonstrates the usage of \@Styles inside and outside a co
@Entry @Entry
@Component @Component
struct FancyUse { struct FancyUse {
@State heightVlaue: number = 100 @State heightValue: number = 100
// Define a \@Styles decorated method inside a component declaration. // Define a \@Styles decorated method inside a component declaration.
@Styles fancy() { @Styles fancy() {
.width(200) .width(200)
.height(this.heightVlaue) .height(this.heightValue)
.backgroundColor(Color.Yellow) .backgroundColor(Color.Yellow)
.onClick(() => { .onClick(() => {
this.heightVlaue = 200 this.heightValue = 200
}) })
} }
......
...@@ -52,6 +52,51 @@ An application can request to be notified whenever the value of the \@Watch deco ...@@ -52,6 +52,51 @@ An application can request to be notified whenever the value of the \@Watch deco
## Application Scenarios ## Application Scenarios
### \@Watch and Custom Component Update
This example is used to clarify the processing steps of custom component updates and \@Watch. **count** is decorated by \@State in **CountModifier** and \@Prop in **TotalView**.
```ts
@Component
struct TotalView {
@Prop @Watch('onCountUpdated') count: number;
@State total: number = 0;
// @Watch cb
onCountUpdated(propName: string): void {
this.total += this.count;
}
build() {
Text(`Total: ${this.total}`)
}
}
@Entry
@Component
struct CountModifier {
@State count: number = 0;
build() {
Column() {
Button('add to basket')
.onClick(() => {
this.count++
})
TotalView({ count: this.count })
}
}
}
```
Processing steps:
1. The click event **Button.onClick** of the **CountModifier** custom component increases the value of **count**.
2. In response to the change of the @State decorated variable **count**, \@Prop in the child component **TotalView** is updated, and its **\@Watch('onCountUpdated')** callback is triggered, which updates the **total** variable in **TotalView**.
3. The **Text** component in the child component **TotalView** is re-rendered.
### Combination of \@Watch and \@Link ### Combination of \@Watch and \@Link
...@@ -124,52 +169,6 @@ The processing procedure is as follows: ...@@ -124,52 +169,6 @@ The processing procedure is as follows:
2. The value of the \@Link decorated variable **BasketViewer shopBasket** changes. 2. The value of the \@Link decorated variable **BasketViewer shopBasket** changes.
3. The state management framework calls the \@Watch callback **BasketViewer onBasketUpdated** to update the value of **BaketViewer TotalPurchase**. 3. The state management framework calls the \@Watch callback **BasketViewer onBasketUpdated** to update the value of **BasketViewer TotalPurchase**.
4. Because \@Link decorated shopBasket changes (a new item is added), the ForEach component executes the item Builder to render and build the new item. Because the @State decorated totalPurchase variables changes, the **Text** component is also re-rendered. Re-rendering happens asynchronously. 4. Because \@Link decorated shopBasket changes (a new item is added), the ForEach component executes the item Builder to render and build the new item. Because the @State decorated totalPurchase variables changes, the **Text** component is also re-rendered. Re-rendering happens asynchronously.
### \@Watch and Custom Component Update
This example is used to clarify the processing steps of custom component updates and \@Watch. **count** is decorated by \@State in **CountModifier** and \@Prop in **TotalView**.
```ts
@Component
struct TotalView {
@Prop @Watch('onCountUpdated') count: number;
@State total: number = 0;
// @Watch cb
onCountUpdated(propName: string): void {
this.total += this.count;
}
build() {
Text(`Total: ${this.total}`)
}
}
@Entry
@Component
struct CountModifier {
@State count: number = 0;
build() {
Column() {
Button('add to basket')
.onClick(() => {
this.count++
})
TotalView({ count: this.count })
}
}
}
```
Processing steps:
1. The click event **Button.onClick** of the **CountModifier** custom component increases the value of **count**.
2. In response to the change of the @State decorated variable **count**, \@Prop in the child component **TotalView** is updated, and its **\@Watch('onCountUpdated')** callback is triggered, which updates the **total** variable in **TotalView**.
3. The **Text** component in the child component **TotalView** is re-rendered.
...@@ -238,7 +238,7 @@ The **abilities** tag represents the UIAbility configuration of the module, whic ...@@ -238,7 +238,7 @@ The **abilities** tag represents the UIAbility configuration of the module, whic
| description | Description of the UIAbility component. The value is a string with a maximum of 255 bytes or a resource index to the description in multiple languages.| String| Yes (initial value: left empty)| | description | Description of the UIAbility component. The value is a string with a maximum of 255 bytes or a resource index to the description in multiple languages.| String| Yes (initial value: left empty)|
| icon | Icon of the UIAbility component. The value is an icon resource index.| String| Yes (initial value: left empty)<br>If **UIAbility** is set to **MainElement**, this attribute is mandatory.| | icon | Icon of the UIAbility component. The value is an icon resource index.| String| Yes (initial value: left empty)<br>If **UIAbility** is set to **MainElement**, this attribute is mandatory.|
| label | Name of the UIAbility component displayed to users. The value is a string resource index.| String| Yes (initial value: left empty)<br>If **UIAbility** is set to **MainElement**, this attribute is mandatory.| | label | Name of the UIAbility component displayed to users. The value is a string resource index.| String| Yes (initial value: left empty)<br>If **UIAbility** is set to **MainElement**, this attribute is mandatory.|
| permissions | Permissions required for another application to access the UIAbility component.<br>The value is an array of permission names predefined by the system, generally in the reverse domain name notation. It contains a maximum of 255 bytes.| String array| Yes (initial value: left empty)| | permissions | Permissions required for another application to access the UIAbility component.<br>The value is generally in the reverse domain name notation and contains a maximum of 255 bytes. It is an array of predefined permission names.| String array| Yes (initial value: left empty)|
| [metadata](#metadata)| Metadata information of the UIAbility component.| Object array| Yes (initial value: left empty)| | [metadata](#metadata)| Metadata information of the UIAbility component.| Object array| Yes (initial value: left empty)|
| exported | Whether the UIAbility component can be called by other applications.<br>- **true**: The UIAbility component can be called by other applications.<br>- **false**: The UIAbility component cannot be called by other applications.| Boolean| Yes (initial value: **false**)| | exported | Whether the UIAbility component can be called by other applications.<br>- **true**: The UIAbility component can be called by other applications.<br>- **false**: The UIAbility component cannot be called by other applications.| Boolean| Yes (initial value: **false**)|
| continuable | Whether the UIAbility component can be [migrated](../application-models/hop-cross-device-migration.md).<br>- **true**: The UIAbility component can be migrated.<br>- **false**: The UIAbility component cannot be migrated.| Boolean| Yes (initial value: **false**)| | continuable | Whether the UIAbility component can be [migrated](../application-models/hop-cross-device-migration.md).<br>- **true**: The UIAbility component can be migrated.<br>- **false**: The UIAbility component cannot be migrated.| Boolean| Yes (initial value: **false**)|
......
...@@ -44,33 +44,43 @@ APIs related to this event: **activateOsAccount**. This API is a system API. For ...@@ -44,33 +44,43 @@ APIs related to this event: **activateOsAccount**. This API is a system API. For
## COMMON_EVENT_USER_INFO_UPDATED<sup>9+<sup> ## COMMON_EVENT_USER_INFO_UPDATED<sup>9+<sup>
Indicates that the user information has been updated. Indicates that the user information has been updated.
- Value: **usual.event.USER_INFO_UPDATED** - Value: usual.event.USER_INFO_UPDATED
- Required subscriber permissions: none - Required subscriber permissions: none
When the distributed account information, system account profile picture, or system account name is changed, the event notification service is triggered to publish this event carrying the system account ID. When the distributed account information, system account profile picture, or system account name is changed, the event notification service is triggered to publish this event carrying the system account ID.
APIs related to this event: **setOsAccountName**, **setOsAccountProfilePhoto**, and **setOsAccountDistributedInfon**. The first two are system APIs, and the last is a public API. For details, see [@ohos.account.osAccount (OS Account Management)](../js-apis-osAccount.md). APIs related to this event: **setOsAccountName**, **setOsAccountProfilePhoto**, and **setOsAccountDistributedInfon**. The first two are system APIs, and the last is a public API. For details, see [@ohos.account.osAccount (OS Account Management)](../js-apis-osAccount.md).
## COMMON_EVENT_USER_UNLOCKED
Indicates that the credential-encrypted storage has been unlocked for the current user after the device is restarted.
- Value: usual.event.USER_UNLOCKED
- Required subscriber permissions: none
When the device is unlocked with the lock screen password the first time after user switching, the event notification service is triggered to publish this event carrying the system account ID.
APIs related to this event: **auth**. This API is a system API. For details, see [@ohos.account.osAccount (OS Account Management)](../js-apis-osAccount.md).
## COMMON_EVENT_DISTRIBUTED_ACCOUNT_LOGIN ## COMMON_EVENT_DISTRIBUTED_ACCOUNT_LOGIN
(Reserved, not supported yet) Indicates a successful login to a distributed account. (Reserved, not supported yet) Indicates a successful login to a distributed account.
- Value: usual.event.DISTRIBUTED_ACCOUNT_LOGIN - Value: common.event.DISTRIBUTED_ACCOUNT_LOGIN
- Required subscriber permissions: none - Required subscriber permissions: none
## COMMON_EVENT_DISTRIBUTED_ACCOUNT_LOGOUT ## COMMON_EVENT_DISTRIBUTED_ACCOUNT_LOGOUT
(Reserved, not supported yet) Indicates a successful logout of a distributed account. (Reserved, not supported yet) Indicates a successful logout of a distributed account.
- Value: usual.event.DISTRIBUTED_ACCOUNT_LOGOUT - Value: common.event.DISTRIBUTED_ACCOUNT_LOGOUT
- Required subscriber permissions: none - Required subscriber permissions: none
## COMMON_EVENT_DISTRIBUTED_ACCOUNT_TOKEN_INVALID ## COMMON_EVENT_DISTRIBUTED_ACCOUNT_TOKEN_INVALID
(Reserved, not supported yet) Indicates the token of a distributed account is invalid. (Reserved, not supported yet) Indicates the token of a distributed account is invalid.
- Value: usual.event.DISTRIBUTED_ACCOUNT_TOKEN_INVALID - Value: common.event.DISTRIBUTED_ACCOUNT_TOKEN_INVALID
- Required subscriber permissions: none - Required subscriber permissions: none
## COMMON_EVENT_DISTRIBUTED_ACCOUNT_LOGOFF ## COMMON_EVENT_DISTRIBUTED_ACCOUNT_LOGOFF
(Reserved, not supported yet) Indicates that a distributed account is deregistered. (Reserved, not supported yet) Indicates that a distributed account is deregistered.
- Value: usual.event.DISTRIBUTED_ACCOUNT_LOGOFF - Value: common.event.DISTRIBUTED_ACCOUNT_LOGOFF
- Required subscriber permissions: none - Required subscriber permissions: none
# @ohos.WallpaperExtensionAbility (WallpaperExtensionAbility) # @ohos.WallpaperExtensionAbility (WallpaperExtensionAbility)
The **WallpaperExtensionAbility** module provides APIs for developing wallpaper extension abilities and managing the lifecycle of these extension abilities. The **WallpaperExtensionAbility** module provides lifecycle callbacks for wallpaper extension abilities and APIs for listening for wallpaper changes.
> **NOTE** > **NOTE**
> >
> The initial APIs of this module are supported since API version 10. 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 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> >
> The APIs of this module can be used only in the FA model. > The APIs of this module can be used only in the stage model.
> >
> The APIs provided by this module are system APIs. > The APIs provided by this module are system APIs.
......
...@@ -74,7 +74,7 @@ Publishes a notification. This API uses a promise to return the result. ...@@ -74,7 +74,7 @@ Publishes a notification. This API uses a promise to return the result.
```js ```js
// NotificationRequest object // NotificationRequest object
let notificationRequest = { let notificationRequest = {
notificationId: 1, id: 1,
content: { content: {
contentType: Notification.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, contentType: Notification.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
normal: { normal: {
...@@ -161,7 +161,7 @@ Publishes a notification to a specified user. This API uses a promise to return ...@@ -161,7 +161,7 @@ Publishes a notification to a specified user. This API uses a promise to return
```js ```js
let notificationRequest = { let notificationRequest = {
notificationId: 1, id: 1,
content: { content: {
contentType: Notification.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, contentType: Notification.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
normal: { normal: {
...@@ -1460,7 +1460,7 @@ Removes a notification for a specified bundle. This API uses an asynchronous cal ...@@ -1460,7 +1460,7 @@ Removes a notification for a specified bundle. This API uses an asynchronous cal
| --------------- | ----------------------------------| ---- | -------------------- | | --------------- | ----------------------------------| ---- | -------------------- |
| bundle | [BundleOption](#bundleoptiondeprecated) | Yes | Bundle information of the application. | | bundle | [BundleOption](#bundleoptiondeprecated) | Yes | Bundle information of the application. |
| notificationKey | [NotificationKey](#notificationkeydeprecated) | Yes | Notification key. | | notificationKey | [NotificationKey](#notificationkeydeprecated) | Yes | Notification key. |
| reason | [RemoveReason](#removereason9-deprecated) | Yes | Indicates the reason for deleting a notification. | | reason | [RemoveReason](#removereason-deprecated) | Yes | Reason for deleting a notification. |
| callback | AsyncCallback\<void\> | Yes | Callback used to return the result.| | callback | AsyncCallback\<void\> | Yes | Callback used to return the result.|
**Example** **Example**
...@@ -1502,7 +1502,7 @@ Removes a notification for a specified bundle. This API uses a promise to return ...@@ -1502,7 +1502,7 @@ Removes a notification for a specified bundle. This API uses a promise to return
| --------------- | --------------- | ---- | ---------- | | --------------- | --------------- | ---- | ---------- |
| bundle | [BundleOption](#bundleoptiondeprecated) | Yes | Bundle information of the application.| | bundle | [BundleOption](#bundleoptiondeprecated) | Yes | Bundle information of the application.|
| notificationKey | [NotificationKey](#notificationkeydeprecated) | Yes | Notification key. | | notificationKey | [NotificationKey](#notificationkeydeprecated) | Yes | Notification key. |
| reason | [RemoveReason](#removereason9-deprecated) | Yes | Reason for deleting the notification. | | reason | [RemoveReason](#removereason-deprecated) | Yes | Reason for deleting the notification. |
**Example** **Example**
...@@ -1536,8 +1536,8 @@ Removes a notification for a specified bundle. This API uses an asynchronous cal ...@@ -1536,8 +1536,8 @@ Removes a notification for a specified bundle. This API uses an asynchronous cal
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| -------- | --------------------- | ---- | -------------------- | | -------- | --------------------- | ---- | -------------------- |
| hashCode | string | Yes | Unique notification ID. It is the **hashCode** in the [NotificationRequest](#notificationrequest) object of [SubscribeCallbackData](#subscribecallbackdata) of the [onConsume](js-apis-inner-notification-notificationSubscriber.md#onconsume) callback. | | hashCode | string | Yes | Unique notification ID. It is the **hashCode** in the [NotificationRequest](#notificationrequest) object of [SubscribeCallbackData](#subscribecallbackdata) of the [onConsume](js-apis-inner-notification-notificationSubscriber.md#onconsume) callback.|
| reason | [RemoveReason](#removereason9-deprecated) | Yes | Indicates the reason for deleting a notification. | | reason | [RemoveReason](#removereason-deprecated) | Yes | Reason for deleting a notification. |
| callback | AsyncCallback\<void\> | Yes | Callback used to return the result.| | callback | AsyncCallback\<void\> | Yes | Callback used to return the result.|
**Example** **Example**
...@@ -1573,7 +1573,7 @@ Removes a notification for a specified bundle. This API uses a promise to return ...@@ -1573,7 +1573,7 @@ Removes a notification for a specified bundle. This API uses a promise to return
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| -------- | ---------- | ---- | ---------- | | -------- | ---------- | ---- | ---------- |
| hashCode | string | Yes | Unique notification ID.| | hashCode | string | Yes | Unique notification ID.|
| reason | [RemoveReason](#removereason9-deprecated) | Yes | Reason for deleting the notification. | | reason | [RemoveReason](#removereason-deprecated) | Yes | Reason for deleting the notification. |
**Example** **Example**
...@@ -2872,10 +2872,10 @@ Notification.getDeviceRemindType().then((data) => { ...@@ -2872,10 +2872,10 @@ Notification.getDeviceRemindType().then((data) => {
> >
> This API is supported since API version 7 and deprecated since API version 9. You are advised to use [notificationManager.BundleOption](js-apis-inner-notification-notificationCommonDef.md#bundleoption) instead. > This API is supported since API version 7 and deprecated since API version 9. You are advised to use [notificationManager.BundleOption](js-apis-inner-notification-notificationCommonDef.md#bundleoption) instead.
| Name | Type | Read-only| Mandatory| Description | | Name | Type | Mandatory| Description |
| ------ | ------ |---- | --- | ------ | | ------ | ------ | --- | ------ |
| bundle | string | No | Yes | Bundle information of the application.| | bundle | string | Yes | Bundle information of the application.|
| uid | number | No | No | User ID.| | uid | number | No | User ID.|
## NotificationKey<sup>deprecated</sup> ## NotificationKey<sup>deprecated</sup>
...@@ -3059,7 +3059,7 @@ Describes the notification request. ...@@ -3059,7 +3059,7 @@ Describes the notification request.
| classification | string | Yes | Yes | Notification category.<br>**System API**: This is a system API and cannot be called by third-party applications. | | classification | string | Yes | Yes | Notification category.<br>**System API**: This is a system API and cannot be called by third-party applications. |
| groupName<sup>8+</sup>| string | Yes | Yes | Notification group name. | | groupName<sup>8+</sup>| string | Yes | Yes | Notification group name. |
| template<sup>8+</sup> | [NotificationTemplate](#notificationtemplate8) | Yes | Yes | Notification template. | | template<sup>8+</sup> | [NotificationTemplate](#notificationtemplate8) | Yes | Yes | Notification template. |
| isRemoveAllowed<sup>8+</sup> | boolean | Yes | No | Whether the notification can be removed.<br>**System API**: This is a system API and cannot be called by third-party applications. | | isRemoveAllowed<sup>10+</sup> | boolean | Yes | No | Whether the notification can be removed.<br>**System API**: This is a system API and cannot be called by third-party applications. |
| source<sup>8+</sup> | number | Yes | No | Notification source.<br>**System API**: This is a system API and cannot be called by third-party applications. | | source<sup>8+</sup> | number | Yes | No | Notification source.<br>**System API**: This is a system API and cannot be called by third-party applications. |
| distributedOption<sup>8+</sup> | [DistributedOptions](#distributedoptions8) | Yes | Yes | Distributed notification options. | | distributedOption<sup>8+</sup> | [DistributedOptions](#distributedoptions8) | Yes | Yes | Distributed notification options. |
| deviceId<sup>8+</sup> | string | Yes | No | Device ID of the notification source.<br>**System API**: This is a system API and cannot be called by third-party applications. | | deviceId<sup>8+</sup> | string | Yes | No | Device ID of the notification source.<br>**System API**: This is a system API and cannot be called by third-party applications. |
...@@ -3203,7 +3203,7 @@ Provides the notification user input. ...@@ -3203,7 +3203,7 @@ Provides the notification user input.
| TYPE_CONTINUOUS | 1 | Continuous notification. | | TYPE_CONTINUOUS | 1 | Continuous notification. |
| TYPE_TIMER | 2 | Timed notification. | | TYPE_TIMER | 2 | Timed notification. |
## RemoveReason<sup>9+</sup> <sup>deprecated</sup> ## RemoveReason <sup>deprecated</sup>
**System capability**: SystemCapability.Notification.Notification **System capability**: SystemCapability.Notification.Notification
...@@ -3211,9 +3211,9 @@ Provides the notification user input. ...@@ -3211,9 +3211,9 @@ Provides the notification user input.
> **NOTE** > **NOTE**
> >
> This API is supported since API version 9 and deprecated since API version 9. You are advised to use [notificationManager.RemoveReason](js-apis-notificationSubscribe.md#removereason) instead. > This API is supported since API version 7 and deprecated since API version 9. You are advised to use [notificationManager.RemoveReason](js-apis-notificationSubscribe.md#removereason) instead.
| Name | Value | Description | | Name | Value | Description |
| -------------------- | --- | -------------------- | | -------------------- | --- | -------------------- |
| CLICK_REASON_REMOVE<sup>9+</sup> | 1 | The notification is removed after a click on it. | | CLICK_REASON_REMOVE | 1 | The notification is removed after a click on it. |
| CANCEL_REASON_REMOVE<sup>9+</sup> | 2 | The notification is removed by the user. | | CANCEL_REASON_REMOVE | 2 | The notification is removed by the user. |
...@@ -443,6 +443,90 @@ notificationSubscribe.remove(hashCode, reason).then(() => { ...@@ -443,6 +443,90 @@ notificationSubscribe.remove(hashCode, reason).then(() => {
console.info("remove success"); console.info("remove success");
}); });
``` ```
## NotificationSubscribe.remove
remove(hashCodes: Array\<string\>, reason: RemoveReason, callback: AsyncCallback\<void\>): void
Removes specified notifications. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.Notification.Notification
**Required permissions**: ohos.permission.NOTIFICATION_CONTROLLER
**System API**: This is a system API and cannot be called by third-party applications.
**Parameters**
| Name | Type | Mandatory| Description |
|-----------|-------------------------------| ---- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hashCodes | Array\<string\> | Yes | Array of unique notification IDs. It is the **hashCode** in the [NotificationRequest](js-apis-inner-notification-notificationRequest.md#notificationrequest) object of [SubscribeCallbackData](js-apis-notification.md#subscribecallbackdata) of the [onConsume](js-apis-inner-notification-notificationSubscriber.md#onConsume) callback.|
| reason | [RemoveReason](#removereason) | Yes | Reason for removing the notification. |
| callback | AsyncCallback\<void\> | Yes | Callback used to return the result. |
**Error codes**
For details about the error codes, see [Notification Error Codes](../errorcodes/errorcode-notification.md).
| ID| Error Message |
| -------- | ----------------------------------- |
| 1600001 | Internal error. |
| 1600002 | Marshalling or unmarshalling error. |
| 1600003 | Failed to connect service. |
**Example**
```js
let hashCodes = ['hashCode1', 'hashCode2'];
function removeCallback(err) {
if (err) {
console.error(`remove failed, code is ${err.code}, message is ${err.message}`);
} else {
console.info("remove success");
}
}
let reason = notificationSubscribe.RemoveReason.CANCEL_REASON_REMOVE;
notificationSubscribe.remove(hashCodes, reason, removeCallback);
```
## NotificationSubscribe.remove
remove(hashCodes: Array\<string\>, reason: RemoveReason): Promise\<void\>
Removes specified notifications. This API uses a promise to return the result.
**System capability**: SystemCapability.Notification.Notification
**Required permissions**: ohos.permission.NOTIFICATION_CONTROLLER
**System API**: This is a system API and cannot be called by third-party applications.
**Parameters**
| Name | Type | Mandatory| Description |
|-----------|-------------------------------| ---- |-------------|
| hashCodes | Array\<string\> | Yes | Array of unique notification IDs.|
| reason | [RemoveReason](#removereason) | Yes | Reason for removing the notification. |
**Error codes**
For details about the error codes, see [Notification Error Codes](../errorcodes/errorcode-notification.md).
| ID| Error Message |
| -------- | ----------------------------------- |
| 1600001 | Internal error. |
| 1600002 | Marshalling or unmarshalling error. |
| 1600003 | Failed to connect service. |
**Example**
```js
let hashCodes = ['hashCode1','hashCode2'];
let reason = notificationSubscribe.RemoveReason.CLICK_REASON_REMOVE;
notificationSubscribe.remove(hashCodes, reason).then(() => {
console.info("remove success");
});
```
## NotificationSubscribe.removeAll ## NotificationSubscribe.removeAll
......
...@@ -48,11 +48,11 @@ For details about how to use attributes, see [Setting Attributes](../../ui/arkts ...@@ -48,11 +48,11 @@ For details about how to use attributes, see [Setting Attributes](../../ui/arkts
| matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| | matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fitOriginalSize | boolean | Whether to fit the component to the original size of the image source when the component size is not set.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| | fitOriginalSize | boolean | Whether to fit the component to the original size of the image source when the component size is not set.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fillColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color to be superimposed on the image.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.| | fillColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color to be superimposed on the image.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.|
| autoResize | boolean | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage. For example, if the size of the original image is 1920 x 1080 and the size of the display area is 200 x 200, you can set this attribute to **true** so that the image is automatically decoded to 200 x 200.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.| | autoResize | boolean | Whether to resize the image source based on the size of the display area during image decoding. This resizing can help reduce the memory usage. For example, if the size of the original image is 1920 x 1080 and the size of the display area is 200 x 200, you can set this attribute to **true** so that the image is automatically decoded to 200 x 200.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
| syncLoad<sup>8+</sup> | boolean | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder image is not displayed.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When loading a small image, you are advised to set **syncLoad** to **true** so that the image loading can be quickly completed on the main thread.| | syncLoad<sup>8+</sup> | boolean | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder image is not displayed.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When loading a small image, you are advised to set **syncLoad** to **true** so that the image loading can be quickly completed on the main thread.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied.<br>When **copyOption** is set to a value other than **CopyOptions.None**, the image can be copied in various manners, such as long pressing, right-clicking, or pressing Ctrl+C.<br>Default value: **CopyOptions.None**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>SVG images cannot be copied.| | copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied.<br>When **copyOption** is set to a value other than **CopyOptions.None**, the image can be copied in various manners, such as long pressing, right-clicking, or pressing Ctrl+C.<br>Default value: **CopyOptions.None**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>SVG images cannot be copied.|
| colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image. The input parameter is a 4 x 5 RGBA transformation matrix.<br>The first row of the matrix represents a vector value of R (red), the second row represents a vector value of G (green), the third row represents a vector value of B (blue), and the fourth row represents a vector value of A (alpha). The four rows represent different RGBA vector values.<br>The RGBA values are floating-point numbers between 0 and 1. When the diagonal value of the matrix is 1, the original color of the image is retained.<br> **Calculation rule:**<br>If the input filter matrix is as follows:<br>![image-matrix-1](figures/image-matrix-1.jpg)<br>Wherein the color is [R, G, B, A].<br>Then the color after filtering is [R', G', B', A'].<br>![image-matrix-2](figures/image-matrix-2.jpg)<br>Since API version 9, this API is supported in ArkTS widgets. | | colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image. The input parameter is a 4 x 5 RGBA transformation matrix.<br>The first row of the matrix represents a vector value of R (red), the second row represents a vector value of G (green), the third row represents a vector value of B (blue), and the fourth row represents a vector value of A (alpha). The four rows represent different RGBA vector values.<br>The RGBA values are floating-point numbers between 0 and 1. When the diagonal value of the matrix is 1, the original color of the image is retained.<br> **Calculation rule:**<br>If the input filter matrix is as follows:<br>![image-matrix-1](figures/image-matrix-1.jpg)<br>Wherein the color is [R, G, B, A].<br>Then the color after filtering is [R', G', B', A'].<br>![image-matrix-2](figures/image-matrix-2.jpg)<br>Since API version 9, this API is supported in ArkTS widgets. |
| draggable<sup>(deprecated)</sup> | boolean | Whether the image is draggable.<br>This attribute cannot be used together with the [onDragStart](ts-universal-events-drag-drop.md) event.<br>Default value: **false**<br>**NOTE**<br>This API is supported since API version 9 and deprecated since API version 10. You are advised to use the universal attribute [draggable](ts-universal-events-drag-drop.md) instead.| | draggable<sup>(deprecated)</sup> | boolean | Whether the image is draggable.<br>This attribute cannot be used together with the [onDragStart](ts-universal-attributes-drag-drop.md) event.<br>Default value: **false**<br>**NOTE**<br>This API is supported since API version 9 and deprecated since API version 10. You are advised to use the universal attribute [draggable](ts-universal-events-drag-drop.md) instead.|
> **NOTE** > **NOTE**
> >
...@@ -66,7 +66,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -66,7 +66,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ---------------------------------------------------- | | ------ | ---------------------------------------------------- |
| None | No image interpolation. | | None | No image interpolation. |
| High | High quality interpolation. This mode produces the highest possible quality scaled images, but may require more image rendering time.| | High | High quality interpolation. This mode produces scaled images of the highest possible quality, but may require more image rendering time.|
| Medium | Medium quality interpolation. | | Medium | Medium quality interpolation. |
| Low | Low quality interpolation. | | Low | Low quality interpolation. |
......
...@@ -15,7 +15,9 @@ This component can contain a single child component. ...@@ -15,7 +15,9 @@ This component can contain a single child component.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
**API 1**: ListItem(value?: ListItemOptions)<sup>10+</sup> ### ListItem<sup>10+</sup>
ListItem(value?: ListItemOptions)
**Parameters** **Parameters**
...@@ -23,15 +25,17 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -23,15 +25,17 @@ Since API version 9, this API is supported in ArkTS widgets.
| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | | ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ |
| value | [ListItemOptions](#listitemoptions10) | No | Value of the list item, containing the **style** parameter of the **ListItemStyle**enum type.| | value | [ListItemOptions](#listitemoptions10) | No | Value of the list item, containing the **style** parameter of the **ListItemStyle**enum type.|
**API 2**: ListItem(value?: string)<sup>(deprecated)</sup> ### ListItem<sup>(deprecated)</sup>
ListItem(value?: string)
This API is deprecated since API version 10. You are advised to use API 1 instead. This API is deprecated since API version 10. You are advised to use [ListItem<sup>10+</sup>](#listitem10) instead.
**Parameters** **Parameters**
| Name| Type | Mandatory| Description| | Name| Type | Mandatory| Description|
| ------ | ----------------------------- | ---- | -------- | | ------ | ----------------------------- | ---- | -------- |
| value | string<sup>(deprecated)</sup> | No | N/A | | value | string | No | N/A |
## Attributes ## Attributes
...@@ -85,7 +89,7 @@ For a list in horizontal layout, it refers to the delete item displayed below (o ...@@ -85,7 +89,7 @@ For a list in horizontal layout, it refers to the delete item displayed below (o
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ----- | ----------------------------------------- | ---- | ------------------------------------------------------------ | | ----- | ----------------------------------------- | ---- | ------------------------------------------------------------ |
| style | [ListItemStyle](#listitemstyle10) | No | Style of the list item.<br>Default value: **ListItemStyle.NONE**<br>If this parameter is set to **ListItemStyle.NONE**, no style is applied.<br>If this parameter is set to **ListItemStyle.CARD**, the default card style is applied, but only when **ListItemGroupStyle.CARD** is set for [\<ListItemGroup>](ts-container-listitemgroup.md).<br>In the default card style, the list item has a 48 vp height and 100% width. It can be in focus, hover, press, selected, or disable style depending on the state.<br>**NOTE**<br>In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**. | | style | [ListItemStyle](#listitemstyle10) | No | Style of the list item.<br>Default value: **ListItemStyle.NONE**<br>If this parameter is set to **ListItemStyle.NONE**, no style is applied.<br>If this parameter is set to **ListItemStyle.CARD**, the default card style is applied, but only when **ListItemGroupStyle.CARD** is set for [\<ListItemGroup>](ts-container-listitemgroup.md).<br>In the default card style, the list item has a 48 vp height and 100% width. It can be in focus, hover, press, selected, or disable style depending on the state.<br>**NOTE**<br>In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**.|
## ListItemStyle<sup>10+</sup> ## ListItemStyle<sup>10+</sup>
...@@ -173,7 +177,7 @@ struct ListItemExample2 { ...@@ -173,7 +177,7 @@ struct ListItemExample2 {
this.arr.splice(index, 1) this.arr.splice(index, 1)
}) })
}, },
actionAreaDistance: 80, actionAreaDistance: 56,
onEnterActionArea: () => { onEnterActionArea: () => {
this.enterEndDeleteAreaString = "enterEndDeleteArea" this.enterEndDeleteAreaString = "enterEndDeleteArea"
this.exitEndDeleteAreaString = "not exitEndDeleteArea" this.exitEndDeleteAreaString = "not exitEndDeleteArea"
......
# Multimodal Input Changelog
## cl.multimodalinput.1 Error Information Return Method Change of APIs
The internal APIs of the following modules used service logic return values to indicate error information, which did not comply with the error code specifications of OpenHarmony. Therefore, they are modified in API version 9 and later.
- Input device management module (**@ohos.multimodalInput.inputDevice.d.ts**): third-party APIs
- Input consumer module (**@ohos.multimodalInput.inputConsumer.d.ts**): system APIs
- Screen hopping module (**@ohos.multimodalInput.inputDeviceCooperate.d.ts**): system APIs
- Key injection module (**@ohos.multimodalInput.inputEventClient.d.ts**): system APIs
- Input listening module (**@ohos.multimodalInput.inputMonitor.d.ts**): system APIs
- Mouse pointer module (**@ohos.multimodalInput.pointer.d.ts**): system APIs and third-party APIs
Asynchronous APIs in the preceding modules have the following changes: A parameter check error is returned synchronously; a service logic error is returned via **AsyncCallback** or the **error** object of **Promise**. No change is made to synchronous APIs.
**Change Impacts**
The application developed based on earlier versions needs to adapt the method for returning API error information. Otherwise, the original service logic will be affected.
**Key API/Component Changes**
- supportKeys(deviceId: number, keys: Array&lt;KeyCode&gt;, callback: AsyncCallback&lt;Array&lt;boolean&gt;&gt;): void;
- supportKeys(deviceId: number, keys: Array&lt;KeyCode&gt;): Promise&lt;Array&lt;boolean&gt;&gt;;
- getKeyboardType(deviceId: number, callback: AsyncCallback&lt;KeyboardType&gt;): void; &gt;
- getKeyboardType(deviceId: number): Promise&lt;KeyboardType&gt;;
- setPointerSpeed(speed: number, callback: AsyncCallback&lt;void&gt;): void;
- setPointerSpeed(speed: number): Promise&lt;void&gt;;
- getPointerSpeed(callback: AsyncCallback&lt;number&gt;): void;
- getPointerSpeed(): Promise&lt;number&gt;;
- setPointerStyle(windowId: number, pointerStyle: PointerStyle, callback: AsyncCallback&lt;void&gt;): void;
- setPointerStyle(windowId: number, pointerStyle: PointerStyle): Promise&lt;void&gt;;
- getPointerStyle(windowId: number, callback: AsyncCallback&lt;PointerStyle&gt;): void;
- getPointerStyle(windowId: number): Promise&lt;PointerStyle&gt;;
- setPointerVisible(visible: boolean, callback: AsyncCallback&lt;void&gt;): void;
- setPointerVisible(visible: boolean): Promise&lt;void&gt;;
- isPointerVisible(callback: AsyncCallback&lt;boolean&gt;): void;
- isPointerVisible(): Promise&lt;boolean&gt;;
- on(type:"touch", receiver:TouchEventReceiver):void;
- on(type:"mouse", receiver:Callback&lt;MouseEvent&gt;):void;
- off(type:"touch", receiver?:TouchEventReceiver):void;
- off(type:"mouse", receiver?:Callback&lt;MouseEvent&gt;):void;
- injectEvent({KeyEvent: KeyEvent}): void;
- enable(enable: boolean, callback: AsyncCallback&lt;void&gt;): void;
- enable(enable: boolean): Promise&lt;void&gt;;
- start(sinkDeviceDescriptor: string, srcInputDeviceId: number, callback: AsyncCallback&lt;void&gt;): void;
- start(sinkDeviceDescriptor: string, srcInputDeviceId: number): Promise&lt;void&gt;;
- stop(callback: AsyncCallback&lt;void&gt;): void;
- stop(): Promise&lt;void&gt;;
- getState(deviceDescriptor: string, callback: AsyncCallback&lt;{ state: boolean }&gt;): void;
- getState(deviceDescriptor: string): Promise&lt;{ state: boolean }&gt;;
- on(type: 'cooperation', callback: AsyncCallback&lt;{ deviceDescriptor: string, eventMsg: EventMsg }&gt;): void;
- off(type: 'cooperation', callback?: AsyncCallback&lt;void&gt;): void;
- on(type: "key", keyOptions: KeyOptions, callback: Callback&lt;KeyOptions&gt;): void;
- off(type: "key", keyOptions: KeyOptions, callback?: Callback&lt;KeyOptions&gt;): void;
Deprecated APIs:
- getDeviceIds(callback: AsyncCallback&lt;Array&lt;number&gt;&gt;): void;
- getDeviceIds(): Promise&lt;Array&lt;number&gt;&gt;;
- getDevice(deviceId: number, callback: AsyncCallback&lt;InputDeviceData&gt;): void;
- getDevice(deviceId: number): Promise&lt;InputDeviceData&gt;;
Substitute APIs:
- getDeviceList(callback: AsyncCallback&lt;Array&lt;number&gt;&gt;): void;
- getDeviceList(): Promise&lt;Array&lt;number&gt;&gt;;
- getDeviceInfo(deviceId: number, callback: AsyncCallback&lt;InputDeviceData&gt;): void;
- getDeviceInfo(deviceId: number): Promise&lt;InputDeviceData&gt;;
Changed APIs:
Before change:
- supportKeys(deviceId: number, keys: Array&lt;KeyCode&gt;, callback: Callback&lt;Array&lt;boolean&gt;&gt;): void;
- getKeyboardType(deviceId: number, callback: Callback&lt;KeyboardType&gt;): void;
After change:
- supportKeys(deviceId: number, keys: Array&lt;KeyCode&gt;, callback: AsyncCallback&lt;Array&lt;boolean&gt;&gt;): void;
- getKeyboardType(deviceId: number, callback: AsyncCallback&lt;KeyboardType&gt;): void;
**Adaptation Guide**
The following uses **setPointerVisible** as an example:
```ts
import pointer from '@ohos.multimodalInput.pointer';
pointer.setPointerVisible(true, (error) => {
console.log(`Set pointer visible success`);
});
try {
pointer.setPointerVisible(true, (error) => {
if (error) {
console.log(`Set pointer visible failed, error: ${JSON.stringify(error, [`code`, `message`])}`);
return;
}
console.log(`Set pointer visible success`);
});
} catch (error) {
console.log(`Set pointer visible failed, error: ${JSON.stringify(error, [`code`, `message`])}`);
}
```
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册