!18722 【3.2-Release】翻译完成 17917+17735

Merge pull request !18722 from ester.zhou/C2-17917

en/application-dev/application-models/arkts-ui-widget-image-update.md

@@ -4,7 +4,7 @@
 Generally, local images or online images downloaded from the network need to be displayed on a widget. To obtain local and online images, use the FormExtensionAbility. The following exemplifies how to show local and online images on a widget.
 
 
-1. Internet access is required for downloading online images. Therefore, you need to apply for the **ohos.permission.INTERNET** permission. For details, see[Declaring Permissions in the Configuration File](../security/accesstoken-guidelines.md).
+1. Internet access is required for downloading online images. Therefore, you need to apply for the **ohos.permission.INTERNET** permission. For details, see [Declaring Permissions in the Configuration File](../security/accesstoken-guidelines.md).
 
 2. Update local files in the **onAddForm** lifecycle callback of the EntryFormAbility.
    

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

@@ -20,6 +20,10 @@ The decorators described above can observe only the changes of the first layer.
 - Using \@Observed alone has no effect. Combined use with \@ObjectLink for two-way synchronization or with [\@Prop](arkts-prop.md) for one-way synchronization is required.
 
 
+## Restrictions
+
+Using \@Observed to decorate a class changes the original prototype chain of the class. Using \@Observed and other class decorators to decorate the same class may cause problems.
+
 ## Decorator Description
 
 | \@Observed Decorator| Description                               |
@@ -212,7 +216,7 @@ Event handlers in **ViewB**:
 
 - this.b.a = new ClassA(0) and this.b = new ClassB(new ClassA(0)): Change to the \@State decorated variable **b** and its attributes.
 
-- this.b.a.c = ... : Second change. [@State](arkts-state.md# observe the change) cannot observe the change of the second layer, but ClassA is decorated by \@Observed, and therefore the change of its attribute c can be observed by \@ObjectLink.
+- this.b.a.c = ... : Second change. [@State](arkts-state.md#observed-changes) cannot observe the change of the second layer, but ClassA is decorated by \@Observed, and therefore the change of its attribute c can be observed by \@ObjectLink.
 
 
 Event handlers in **ViewA**:
@@ -296,7 +300,7 @@ struct ViewB {
   1. ForEach: The newly added Class A object is unknown to the **ForEach** [itemGenerator](arkts-rendering-control-foreach.md#api-description). The item builder of **ForEach** will be executed to create a **View A** component instance.
   2. ViewA({ label: ViewA this.arrA[last], a: this.arrA[this.arrA.length-1] }): The last item of the array is changed. As a result, the second **View A** component instance is changed. For **ViewA({ label: ViewA this.arrA[first], a: this.arrA[0] })**, a change to the array does not trigger a change to the array item, so the first **View A** component instance is not refreshed.
 
-- this.arrA[Math.floor (this.arrA.length/2)].c: [@State] (arkts-state.md#observe-changes) cannot observe changes in the second layer. However, as **ClassA** is decorated by \@Observed, the change of its attributes will be observed by \@ObjectLink.
+- this.arrA[Math.floor (this.arrA.length/2)].c: [@State](arkts-state.md#observed-changes) cannot observe changes in the second layer. However, as **ClassA** is decorated by \@Observed, the change of its attributes will be observed by \@ObjectLink.
 
 
 ### Two-Dimensional Array
@@ -312,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.
@@ -129,11 +129,11 @@ struct MyComponent {
 
   build() {
     Column() {
-      // When this.showChild is true, the Child component is created, and Child aboutToAppear is invoked.
+      // When this.showChild is true, the Child child component is created, and Child aboutToAppear is invoked.
       if (this.showChild) {
         Child()
       }
-      // When this.showChild is false, the Child component is deleted, and Child aboutToDisappear is invoked.
+      // When this.showChild is false, the Child child component is deleted, and Child aboutToDisappear is invoked.
       Button('delete Child').onClick(() => {
         this.showChild = false;
       })

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/apis/js-apis-accessibility.md

@@ -370,7 +370,7 @@ Obtains the accessibility application list. This API uses a promise to return th
 > **NOTE**
 >
 > This API is supported since API version 7 and deprecated since API version 9.
-> You are advised to use[getAccessibilityExtensionList()](#accessibilitygetaccessibilityextensionlist9).
+> You are advised to use [getAccessibilityExtensionList()](#accessibilitygetaccessibilityextensionlist9).
 
 **System capability**: SystemCapability.BarrierFree.Accessibility.Core
 

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

@@ -39,7 +39,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 | 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. |
 
 ## Example
 

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

@@ -39,7 +39,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
 
 
-[Attribute animation](../reference/arkui-ts/ts-animatorproperty.md) (animation) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) (animateTo) 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.
+[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                                      | Application Scenario    |
-| ---- | ---------------------------------------- | -------- |
-| Attribute animation| The animation setting is simple. The animation is automatically triggered when the attribute changes.                     | Simple animation scenario|
-| Explicit animation| Changes in a closure trigger animations, including component addition and deletion caused by data changes and component attribute changes. Complex animations can be performed.| Complex animation scenarios|
+| 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 Generate Layout Update Animation
+## Using Explicit Animation to Create Layout Update Animation
 
 The API for explicit animation is as follows:
 
@@ -21,7 +21,7 @@ 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 produce a layout update animation. In the example, after the alignItems attribute of the Column component is changed, the layout of its child components changes. As long as the attribute is modified in the closure function of **animateTo**, all changes caused by the attribute are performed to the end value according to the animation parameter of animateTo.
+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
@@ -50,7 +50,7 @@ struct LayoutChange {
         // 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 children in the Column container. Use an animation to transition to the new position.
+          // 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];
         });
       })
@@ -65,7 +65,7 @@ struct LayoutChange {
 ![layoutChange1](figures/layoutChange1.gif)
 
 
-In addition to directly changing the layout mode, you can also directly change the width, height, and position of a component.
+In addition to directly changing the layout, you can also change the width, height, and position of a component.
 
 
 
@@ -75,7 +75,7 @@ In addition to directly changing the layout mode, you can also directly change t
 struct LayoutChange2 {
   @State myWidth: number = 100;
   @State myHeight: number = 50;
-  // Flag. true and false correspond to a group of myWidth and myHeight values respectively.
+  // Flag. true and false correspond to a group of myWidth and myHeight values, respectively.
   @State flag: boolean = false;
 
   build() {
@@ -90,7 +90,7 @@ struct LayoutChange2 {
         .margin(20)
         .onClick(() => {
           animateTo({ duration: 1000, curve: Curve.Ease }, () => {
-            // In the animation closure, the state variable that controls the width and height of the first button is changed based on the flag bit so that the width and height of the first button are animated.
+            // 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;
@@ -109,16 +109,16 @@ struct LayoutChange2 {
 ```
 
 
-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. The two state variables are the width and height attribute values of the first button. Therefore, the width and height animation is performed for the first button. The display effect is shown below.
+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. The layout of the second button is also changed because the width and height of the first button are changed in the closure.
+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 modified key code is as follows:
+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:
 
 
 
@@ -139,7 +139,7 @@ Column({ space: 10 }) {
     .fontSize(12)
     .onClick(() => {
       animateTo({ duration: 1000, curve: Curve.Ease }, () => {
-        // In the animation closure, the state variable that controls the width and height of the first button is changed based on the flag bit so that the width and height of the first button are animated.
+        // 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;
@@ -159,7 +159,7 @@ Column({ space: 10 }) {
 ![layoutChange2_animateTo_change](figures/layoutChange2_animateTo_change.gif)
 
 
-2. Add layout constraints to the second button, for example, position constraints, so that the position of the second button is not affected by the width and height of the first button. Sample code:
+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: 
 
 
 
@@ -173,11 +173,11 @@ Column({ space: 10 }) {
 
   Button("area: click me")
     .fontSize(12)
-    // Set the position attribute to a fixed value so that the layout position is not affected by the width and height of the first button.
+    // 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 variable that controls the width and height of the first button is changed based on the flag bit so that the width and height of the first button are animated.
+        // 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;
@@ -196,7 +196,7 @@ Column({ space: 10 }) {
 
 ## Using Attribute Animation to Generate Layout Update Animation
 
-The explicit animation places the modification of the attribute of the animation to be executed in the closure function to trigger the animation. The attribute animation does not need to use the closure. You only need to add the animation attribute to the end of the attribute of the component to be executed.
+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:
 
@@ -205,7 +205,7 @@ The API of the attribute animation is as follows:
 animation(value: AnimateParam)
 ```
 
-The input parameter is an animation parameter. If you want the component to generate an animation with the change of an attribute value, you need to add this attribute before the animation attribute. Some attribute changes do not want to generate attribute animations through animations. Therefore, attribute animations can be placed after animations. The example of explicit animation above is easily changed to be implemented with property animation. Sample code:
+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:
 
 
 
@@ -224,11 +224,11 @@ struct LayoutChange2 {
         .type(ButtonType.Normal)
         .width(this.myWidth)
         .height(this.myHeight)
-        // Animation takes effect only for the type, width, and height attributes. The duration is 1000 ms, and the curve is Ease.
+        // 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)
-        // Animation does not take effect for the backgroundColor and margin attributes.
 
       Button("area: click me")
         .fontSize(12)
@@ -251,7 +251,7 @@ struct LayoutChange2 {
 ```
 
 
-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, but does not take effect for the backgroundColor and margin attributes written after the animation. In the running result, the width and height attributes execute the animation based on the animation parameters. However, the backgroundColor directly jumps and no animation is generated. The display effect is shown below.
+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.
 
 
 
@@ -263,8 +263,8 @@ In the preceding example, the animation attribute of the first button takes effe
 
 >**NOTE**
 >
->  1. When the attribute animation is used, the animation is executed according to the specified attribute animation parameters. Each component can configure attribute animations with different parameters for its own attributes.
+>    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 the same animation parameters are used. Therefore, explicit animations are applicable to scenarios where animations are executed in a unified manner. In addition, explicit animations can also be used for animations caused by non-attribute variables, such as if/else conditions and deletion of array elements used by Forach.
+>    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 effect first and the animation parameters of the attribute animation are used.
+>    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.