!22700 22441挑单到3.2release

Merge pull request !22700 from 田雨/rel0822

zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md

@@ -9,9 +9,9 @@
 
 ## 事件
 
-| 名称                                       | 支持冒泡 | 功能描述                                     |
-| ---------------------------------------- | ---- | ---------------------------------------- |
-| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | 否    | 组件区域变化时触发该回调。 |
+| 名称                                                         | 支持冒泡 | 功能描述                                                     |
+| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
+| onAreaChange(event:&nbsp;(oldValue:&nbsp;[Area](ts-types.md#area8),&nbsp;newValue:&nbsp;[Area](ts-types.md#area8))&nbsp;=&gt;&nbsp;void) | 否       | 组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如translate、offset。<br/>-&nbsp;[Area](ts-types.md#area8)：返回目标元素的宽高以及目标元素相对父元素和页面左上角的坐标位置。 |
 
 
 ## 示例

zh-cn/application-dev/ui/arkts-graphics-display.md

@@ -75,17 +75,15 @@ Image支持加载存档图、多媒体像素图两种类型。
   支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。
 
   1. 调用接口获取图库的照片url。
-      ​    
       ```ts
       import picker from '@ohos.file.picker';
-
+      
       @Entry
       @Component
       struct Index {
         @State imgDatas: string[] = [];
         // 获取照片url集
         getAllImg() {
-          let photoPicker = new picker.PhotoViewPicker();
           let result = new Array<string>();
           try {
             let PhotoSelectOptions = new picker.PhotoSelectOptions();
@@ -101,7 +99,7 @@ Image支持加载存档图、多媒体像素图两种类型。
           } catch (err) {
             console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`);    }
         }
-
+      
         // aboutToAppear中调用上述函数，获取图库的所有图片url，存在imgDatas中
         async aboutToAppear() {
           this.getAllImg();
@@ -121,8 +119,8 @@ Image支持加载存档图、多媒体像素图两种类型。
         }
       }
       ```
+
   2. 从媒体库获取的url格式通常如下。
-      ​    
       ```ts
       Image('file://media/Photos/5')
       .width(200)
@@ -150,14 +148,12 @@ PixelMap是图片解码后的像素图，具体用法请参考[图片开发指
    请求网络图片请求，解码编码PixelMap。
 
    1. 引用网络权限与媒体库权限。
-       ​    
        ```ts
        import http from '@ohos.net.http';
        import ResponseCode from '@ohos.net.http';
        import image from '@ohos.multimedia.image';
        ```
    2. 填写网络图片地址。
-       ​    
        ```ts
        http.createHttp().request("https://www.example.com/xxx.png",
          (error, data) => {
@@ -168,25 +164,24 @@ PixelMap是图片解码后的像素图，具体用法请参考[图片开发指
          }
        )
        ```
-   3. 将网络地址成功返回的数据，编码转码成pixelMap的图片格式。
-       ​    
+   3. 将网络地址成功返回的数据，编码转码成pixelMap的图片格式。   
        ```ts
        let code = data.responseCode;
-       if(ResponseCode.ResponseCode.OK === code) {
+       if (ResponseCode.ResponseCode.OK === code) {
          let imageSource = image.createImageSource(data.result);
          let options = {
-           alphaType: 0,                     // 透明度
-           editable: false,                  // 是否可编辑
-           pixelFormat: 3,                   // 像素格式
-           scaleMode: 1,                     // 缩略值
-           size: {height: 100, width: 100}
-          }  // 创建图片大小
-           imageSource.createPixelMap(options).then((pixelMap) => {
+           alphaType: 0, // 透明度
+           editable: false, // 是否可编辑
+           pixelFormat: 3, // 像素格式
+           scaleMode: 1, // 缩略值
+           size: { height: 100, width: 100 }
+         } // 创建图片大小
+         imageSource.createPixelMap(options).then((pixelMap) => {
            this.image = pixelMap
-       })
+         })
+       }
        ```
    4. 显示图片。
-       ​    
        ```ts
        Button("获取网络图片")
          .onClick(() => {

zh-cn/application-dev/ui/arkts-layout-development-create-list.md

@@ -46,7 +46,7 @@ List除了提供垂直和水平布局能力、超出屏幕时可以滚动的自
 
 列表的主轴方向是指子组件列的排列方向，也是列表的滚动方向。垂直于主轴的轴称为交叉轴，其方向与主轴方向相互垂直。
 
-如下图所示，垂直列表的主轴是垂直方向，交叉轴是水平方向；水平列表的主轴是水平方向，交叉轴是水平方向。
+如下图所示，垂直列表的主轴是垂直方向，交叉轴是水平方向；水平列表的主轴是水平方向，交叉轴是垂直方向。
 
   **图4** 列表的主轴与交叉轴  
 

zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md

@@ -514,31 +514,33 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器
 
 
   ```ts
-  Flex() {
-    Text('flexBasis("auto")')
-      .flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽松
-      .height(100)
-      .backgroundColor(0xF5DEB3)
-    Text('flexBasis("auto")'+' width("40%")')
-      .width('40%')
-      .flexBasis('auto') //设置width以及flexBasis值auto，使用width的值
-      .height(100)
-      .backgroundColor(0xD2B48C)
+Flex() {
+  Text('flexBasis("auto")')
+    .flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽松
+    .height(100)
+    .backgroundColor(0xF5DEB3)
+  Text('flexBasis("auto")' + ' width("40%")')
+    .width('40%')
+    .flexBasis('auto') //设置width以及flexBasis值auto，使用width的值
+    .height(100)
+    .backgroundColor(0xD2B48C)
 
-    Text('flexBasis(100)')  // 未设置width以及flexBasis值为100，宽度为100vp
-      .flexBasis(100)  
-      .height(100)
-      .backgroundColor(0xF5DEB3)
+  Text('flexBasis(100)') // 未设置width以及flexBasis值为100，宽度为100vp
+    .fontSize(15)
+    .flexBasis(100)
+    .height(100)
+    .backgroundColor(0xF5DEB3)
 
-    Text('flexBasis(100)')
-      .flexBasis(100)
-      .width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp
-      .height(100)
-      .backgroundColor(0xD2B48C)
-  }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
+  Text('flexBasis(100)')
+    .fontSize(15)
+    .flexBasis(100)
+    .width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp
+    .height(100)
+    .backgroundColor(0xD2B48C)
+}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
   ```
 
-  ![zh-cn_image_0000001562940505](figures/zh-cn_image_0000001562940505.png)
+![zh-cn_image_0000001562940505](figures/zh-cn_image_0000001562940505.png)
 
 - flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于“瓜分”父组件的剩余空间。
 
@@ -574,24 +576,25 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器
 
 
   ```ts
-  Flex({ direction: FlexDirection.Row }) {
-    Text('flexShrink(3)')
-      .flexShrink(3)
-      .width(200)
-      .height(100)
-      .backgroundColor(0xF5DEB3)
-    
-    Text('no flexShrink')
-      .width(200)
-      .height(100)
-      .backgroundColor(0xD2B48C)
+Flex({ direction: FlexDirection.Row }) {
+  Text('flexShrink(3)')
+    .fontSize(15)
+    .flexShrink(3)
+    .width(200)
+    .height(100)
+    .backgroundColor(0xF5DEB3)
 
-    Text('flexShrink(2)')
-      .flexShrink(2)
-      .width(200)
-      .height(100)
-      .backgroundColor(0xF5DEB3)  
-  }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) 
+  Text('no flexShrink')
+    .width(200)
+    .height(100)
+    .backgroundColor(0xD2B48C)
+
+  Text('flexShrink(2)')
+    .flexShrink(2)
+    .width(200)
+    .height(100)
+    .backgroundColor(0xF5DEB3)
+}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
   ```
 
   ![zh-cn_image_0000001562820813](figures/zh-cn_image_0000001562820813.png)

zh-cn/application-dev/ui/arkts-layout-development-linear.md

@@ -76,7 +76,7 @@ Row({ space: 35 }) {
 
 在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为[VerticalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#verticalalign)，水平方向取值为[HorizontalAlign](../reference/arkui-ts/ts-appendix-enums.md#horizontalalign)。
 
-alignSelf属性用于控制单个子元素在容器主轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。
+alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。
 
 
 ### Column容器内子元素在水平方向上的排列

zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md

@@ -26,7 +26,7 @@
 
 ### 锚点设置
 
-锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“container”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。
+锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“__container__”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。
 
 >**说明：**
 >