Update docs (17684)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/quick-start/arkts-observed-and-objectlink.md

@@ -316,7 +316,7 @@ class StringArray extends Array<String> {
 
  
 
-Declare a class that extends from** Array**: **class StringArray extends Array\<String> {}** and create an instance of **StringArray**. The use of the **new** operator is required for the \@Observed class decorator to work properly.
+Declare a class that extends from **Array**: **class StringArray extends Array\<String> {}** and create an instance of **StringArray**. The use of the **new** operator is required for the \@Observed class decorator to work properly.
 
 
 ```ts

en/application-dev/quick-start/arkts-page-custom-components-lifecycle.md

@@ -19,7 +19,7 @@ The following lifecycle callbacks are provided for the lifecycle of a page, that
 - [onBackPress](../reference/arkui-ts/ts-custom-component-lifecycle.md#onbackpress): Invoked when the user clicks the Back button.
 
 
-The following lifecycle callbacks are provided for the lifecycle of a custom component, which is one decorated with \@Component:
+The following lifecycle callbacks are provided for the lifecycle of a component, that is, the lifecycle of a custom component decorated with \@Component:
 
 
 - [aboutToAppear](../reference/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear): Invoked when the custom component is about to appear. Specifically, it is invoked after a new instance of the custom component is created and before its **build** function is executed.
@@ -134,7 +134,7 @@ struct MyComponent {
         Child()
       }
       // When this.showChild is false, the Child child component is deleted, and Child aboutToDisappear is invoked.
-      Button('create or delete Child').onClick(() => {
+      Button('delete Child').onClick(() => {
         this.showChild = false;
       })
       // Because of the pushing from the current page to Page2, onPageHide is invoked.

en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md

@@ -75,15 +75,17 @@ interface DataChangeListener {
 }
 ```
 
-| Declaration                                    | Parameter Type                                  | Description                                      |
-| ---------------------------------------- | -------------------------------------- | ---------------------------------------- |
-| onDataReloaded(): void              | -                                      | Invoked when all data is reloaded.                           |
-| onDataAdded(index:&nbsp;number):void     | 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 | 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.|
-| onDataChanged(index:&nbsp;number):&nbsp;void | number                                 | Invoked when data in the position indicated by the specified index is changed.<br>**index**: listener for data changes.  |
-| onDataAdd(index:&nbsp;number):&nbsp;void | 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 | 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.|
-| onDataChanged(index:&nbsp;number):&nbsp;void | number                                 | Invoked when data in the position indicated by the specified index is changed.<br>**index**: index of the position where data is changed.|
+| 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.|
+| 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.|
 
 
 ## Restrictions

en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md

@@ -30,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name         | Type| Description|
 | ------------- | ------- | -------- |
-| select        | boolean | Whether the check box is selected.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| select        | boolean | Whether the check box is selected.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
 | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the check box when it is selected.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | unselectedColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the check box when it is not selected.|
 | mark<sup>10+</sup> | [MarkStyle](#markstyle10) | Internal icon style of the check box.|
@@ -39,9 +39,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported.
 
-| Name                                        | Description                                                    |
+| Name                                         | Description                                                  |
 | -------------------------------------------- | ------------------------------------------------------------ |
-| onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected.<br>Since API version 9, this API is supported in ArkTS widgets. |
 
 ## MarkStyle<sup>10+</sup>
 

en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md

@@ -30,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| selectAll | boolean | Whether to select all.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>If the **select** attribute is set for a [\<Checkbox>](ts-basic-components-checkbox.md) component in the same group, the setting of the **\<Checkbox>** has a higher priority.|
+| selectAll | boolean | Whether to select all.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>If the **select** attribute is set for a [\<Checkbox>](ts-basic-components-checkbox.md) component in the same group, the setting of the **\<Checkbox>** has a higher priority.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
 | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | unselectedColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the check box when it is not selected.|
 | mark<sup>10+</sup> | [MarkStyle](#markstyle10) | Internal icon style of the check box.|
@@ -41,7 +41,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 | Name| Description|
 | -------- | -------- |
-| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes due to a manual operation.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes.<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 ## CheckboxGroupResult
 

en/application-dev/ui/arkts-layout-update-animation.md

+# Layout Update Animation
+
+
+[Explicit animation](../reference/arkui-ts/ts-explicit-animation.md) (**animateTo**) and [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) (**animation**) are the most basic and common animation features provided by ArkUI. When the layout attributes (such as the [size](../reference/arkui-ts/ts-universal-attributes-size.md) and [position](../reference/arkui-ts/ts-universal-attributes-location.md)) attributes change, you can use the attribute animation or explicit animation to transit to the new layout parameter status based on the animation parameters.
+
+
+| Animation Type| Description                                      |
+| ---- | ---------------------------------------- |
+| Explicit animation| Triggered by changes in a closure, including component addition and deletion caused by data changes and component attribute changes.| Complex animation scenarios|
+| Attribute animation| Triggered when the attribute changes. The animation setting is simple.                     |
+
+
+## Using Explicit Animation to Create Layout Update Animation
+
+The API for explicit animation is as follows:
+
+
+```ts
+animateTo(value: AnimateParam, event: () => void): void
+```
+
+The first parameter specifies the animation parameter, and the second parameter is the closure function of the animation.
+
+The following is an example of using explicit animation to create a layout update animation. In the example, when the **\<Column>** component's **alignItems** attribute is updated, the layout of its child components changes. As long as the attribute is updated in the closure function of **animateTo**, animation is performed as configured through **animateTo** for all changes caused by the attribute toward the end value.
+
+
+```ts
+@Entry
+@Component
+struct LayoutChange {
+  // Used to control the alignItems attribute of a column.
+  @State itemAlign: HorizontalAlign = HorizontalAlign.Start;
+  allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];
+  alignIndex: number = 0;
+
+  build() {
+    Column() {
+      Column({ space: 10 }) {
+        Button("1").width(100).height(50)
+        Button("2").width(100).height(50)
+        Button("3").width(100).height(50)
+      }
+      .margin(20)
+      .alignItems(this.itemAlign)
+      .borderWidth(2)
+      .width("90%")
+      .height(200)
+
+      Button("click").onClick(() => {
+        // The animation duration is 1000 ms, and the curve is EaseInOut.
+        animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {
+          this.alignIndex = (this.alignIndex + 1) % this.allAlign.length;
+          // Modify the this.itemAlign parameter in the closure function to change the layout of child elements in the <Column> container. The animation for transition to the new position is applied.
+          this.itemAlign = this.allAlign[this.alignIndex];
+        });
+      })
+    }
+    .width("100%")
+    .height("100%")
+  }
+}
+```
+
+
+![layoutChange1](figures/layoutChange1.gif)
+
+
+In addition to directly changing the layout, you can also change the width, height, and position of a component.
+
+
+
+```ts
+@Entry
+@Component
+struct LayoutChange2 {
+  @State myWidth: number = 100;
+  @State myHeight: number = 50;
+  // Flag. true and false correspond to a group of myWidth and myHeight values, respectively.
+  @State flag: boolean = false;
+
+  build() {
+    Column({ space: 10 }) {
+      Button("text")
+        .type(ButtonType.Normal)
+        .width(this.myWidth)
+        .height(this.myHeight)
+        .margin(20)
+      Button("area: click me")
+        .fontSize(12)
+        .margin(20)
+        .onClick(() => {
+          animateTo({ duration: 1000, curve: Curve.Ease }, () => {
+            // In the animation closure, the state variables that control the width and height of the first button are changed based on the flag settings so that the width and height of the first button are animated.
+            if (this.flag) {
+              this.myWidth = 100;
+              this.myHeight = 50;
+            } else {
+              this.myWidth = 200;
+              this.myHeight = 100;
+            }
+            this.flag = !this.flag;
+          });
+        })
+    }
+    .width("100%")
+    .height("100%")
+  }
+}
+```
+
+
+In the click event of the second button, the **animateTo** API is used to modify the **this.myWidth** and **this.myHeight** state variables in the closure. As these two state variables set the width and height of the first button, the width and height animation is performed for the first button. The display effect is shown below.
+
+
+![layoutChange2_animateTo](figures/layoutChange2_animateTo.gif)
+
+
+At the same time, the second button also produces a position animation. After the width and height of the first button are changed, the layout of other components in the column is also changed, and the second button is among those other components.
+
+
+If you do not want the second button to have an animation effect, you can use either of the following methods: 1. Add a container outside the first button so that the sizes before and after the animation are within the range of the container. In this way, the position of the second button is not affected by the position of the first button. The key code is as follows:
+
+
+
+```ts
+Column({ space: 10 }) {
+  Column() {
+    // The button is placed in a container that is large enough so that it does not affect the position of the outer component.
+    Button("text")
+      .type(ButtonType.Normal)
+      .width(this.myWidth)
+      .height(this.myHeight)
+  }
+  .margin(20)
+  .width(200)
+  .height(100)
+
+  Button("area: click me")
+    .fontSize(12)
+    .onClick(() => {
+      animateTo({ duration: 1000, curve: Curve.Ease }, () => {
+        // In the animation closure, the state variables that control the width and height of the first button are changed based on the flag settings so that the width and height of the first button are animated.
+        if (this.flag) {
+          this.myWidth = 100;
+          this.myHeight = 50;
+        } else {
+          this.myWidth = 200;
+          this.myHeight = 100;
+        }
+        this.flag = !this.flag;
+      });
+    })
+}
+.width("100%")
+.height("100%")
+```
+
+
+![layoutChange2_animateTo_change](figures/layoutChange2_animateTo_change.gif)
+
+
+2. Add layout constraints to the second button. For example, add position constraints so that the position of the second button is not affected by the width and height of the first button.  The sample code is as follows: 
+
+
+
+```ts
+Column({ space: 10 }) {
+  Button("text")
+    .type(ButtonType.Normal)
+    .width(this.myWidth)
+    .height(this.myHeight)
+    .margin(20)
+
+  Button("area: click me")
+    .fontSize(12)
+    // Set the position attribute to a fixed value so that the position of the second button is not affected by the width and height of the first button.
+    .position({ x: "30%", y: 200 })
+    .onClick(() => {
+      animateTo({ duration: 1000, curve: Curve.Ease }, () => {
+        // In the animation closure, the state variables that control the width and height of the first button are changed based on the flag settings so that the width and height of the first button are animated.
+        if (this.flag) {
+          this.myWidth = 100;
+          this.myHeight = 50;
+        } else {
+          this.myWidth = 200;
+          this.myHeight = 100;
+        }
+        this.flag = !this.flag;
+      });
+    })
+}
+.width("100%")
+.height("100%")
+```
+
+
+## Using Attribute Animation to Generate Layout Update Animation
+
+Unlike explicit animation, which requires the attribute changes for triggering animation to be placed in the closure function, attribute animation does not need to use the closure. You only need to append the **animation** attribute to the target component attribute.
+
+The API of the attribute animation is as follows:
+
+
+```ts
+animation(value: AnimateParam)
+```
+
+This API accepts an animation parameter as its argument. If you want the component to generate an animation with the value change of an attribute, add this attribute before the **animation** attribute. Otherwise, you can place the attribute after the **animation** attribute. The previous example of explicit animation can be easily implemented with attribute animation. The sample code is as follows:
+
+
+
+```ts
+@Entry
+@Component
+struct LayoutChange2 {
+  @State myWidth: number = 100;
+  @State myHeight: number = 50;
+  @State flag: boolean = false;
+  @State myColor: Color = Color.Blue;
+
+  build() {
+    Column({ space: 10 }) {
+      Button("text")
+        .type(ButtonType.Normal)
+        .width(this.myWidth)
+        .height(this.myHeight)
+        // The animation takes effect only for the type, width, and height attributes. The duration is 1000 ms, and the curve is Ease.
+        .animation({ duration: 1000, curve: Curve.Ease })
+        // The animation does not take effect for the backgroundColor and margin attributes.
+        .backgroundColor(this.myColor)
+        .margin(20)
+
+      Button("area: click me")
+        .fontSize(12)
+        .onClick(() => {
+          // Change the attribute value. Animation transition is performed for attributes configured with attribute animation.
+          if (this.flag) {
+            this.myWidth = 100;
+            this.myHeight = 50;
+            this.myColor = Color.Blue;
+          } else {
+            this.myWidth = 200;
+            this.myHeight = 100;
+            this.myColor = Color.Pink;
+          }
+          this.flag = !this.flag;
+        })
+    }
+  }
+}
+```
+
+
+In the preceding example, the **animation** attribute of the first button takes effect only for the **type**, **width**, and **height** attributes written before the **animation** attribute, but does not take effect for the **backgroundColor** and **margin** attributes written after. In the running result, the **width** and **height** attributes execute the animation based on the **animation** settings, while the **backgroundColor** attribute changes without any animation applied. The display effect is shown below.
+
+
+
+
+
+
+![size-change-animation](figures/size-change-animation.gif)
+
+
+>**NOTE**
+>
+>    1. Attribute animations are executed according to the configured attribute animation settings. Each component can have its own attribute animation settings.
+>
+>    2. Explicit animations are executed on all GUI differences caused before and after animation closures, and they share the same animation settings. Therefore, explicit animations are applicable to scenarios where animations are executed in a unified manner. Explicit animations can also be used for animations caused by non-attribute variables, such as **if/else** statements and deletion of array elements used by **ForEach**.
+>
+>    3. If an attribute animation is configured for an attribute and the attribute value is changed in the explicit animation closure, the attribute animation takes precedence, under the configured animation settings.