diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
index 2089b18bf7cc0567a0747d1520f4207e2588e446..ff5a7d306a728597037dad4b46f41ac32d71956f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
+++ b/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) | 否 | 组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如translate、offset。 |
+| 名称 | 支持冒泡 | 功能描述 |
+| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
+| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | 否 | 组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如translate、offset。
- [Area](ts-types.md#area8)：返回目标元素的宽高以及目标元素相对父元素和页面左上角的坐标位置。 |
## 示例
diff --git a/zh-cn/application-dev/ui/arkts-graphics-display.md b/zh-cn/application-dev/ui/arkts-graphics-display.md
index 5490c8c570244a14b8a88edc0f42b962c1d9d612..0596121209e9d63213c9e02210b0f2a16dd96291 100644
--- a/zh-cn/application-dev/ui/arkts-graphics-display.md
+++ b/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();
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(() => {
diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-list.md b/zh-cn/application-dev/ui/arkts-layout-development-create-list.md
index 1eacfe6572472e086b7dcac3af1f74037c404892..217997c4bbf3f5b0aaf24be0d104c6c6abd45cb5 100644
--- a/zh-cn/application-dev/ui/arkts-layout-development-create-list.md
+++ b/zh-cn/application-dev/ui/arkts-layout-development-create-list.md
@@ -46,7 +46,7 @@ List除了提供垂直和水平布局能力、超出屏幕时可以滚动的自
列表的主轴方向是指子组件列的排列方向，也是列表的滚动方向。垂直于主轴的轴称为交叉轴，其方向与主轴方向相互垂直。
-如下图所示，垂直列表的主轴是垂直方向，交叉轴是水平方向；水平列表的主轴是水平方向，交叉轴是水平方向。
+如下图所示，垂直列表的主轴是垂直方向，交叉轴是水平方向；水平列表的主轴是水平方向，交叉轴是垂直方向。
**图4** 列表的主轴与交叉轴
diff --git a/zh-cn/application-dev/ui/arkts-layout-development-linear.md b/zh-cn/application-dev/ui/arkts-layout-development-linear.md
index 38585141a0bb6a64e595c277658cf55342cf9821..f1a3c194d2254eeb8fd9bbf79ec6e33b05a324c9 100644
--- a/zh-cn/application-dev/ui/arkts-layout-development-linear.md
+++ b/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容器内子元素在水平方向上的排列
diff --git a/zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md
index 3e3b9afbf2e9df811d8cd399528cfd3f7a8b9327..956b221c9bb04194c81bb61254a4480472cce763 100644
--- a/zh-cn/application-dev/ui/arkts-layout-development-relative-layout.md
+++ b/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中不会显示。
>**说明：**
>
diff --git a/zh-cn/application-dev/ui/arkts-routing.md b/zh-cn/application-dev/ui/arkts-routing.md
index b4119098dec6335961abb9ca940bbafc65c82f3e..7decc43dfb49b9687754ba34a15aa8156b48173d 100644
--- a/zh-cn/application-dev/ui/arkts-routing.md
+++ b/zh-cn/application-dev/ui/arkts-routing.md
@@ -340,6 +340,7 @@ import router from '@ohos.router';
```ts
// library/src/main/ets/pages/Index.ets
+// library为新建共享包自定义的名字
@Entry({ routeName : 'myPage' })
@Component
struct MyComponent {
@@ -351,7 +352,7 @@ struct MyComponent {
```ts
// entry/src/main/ets/pages/Index.ets
import router from '@ohos.router';
-import 'library/src/main/ets/Index.ets' // 引入共享包library中的命名路由页面
+import 'library/src/main/ets/pages/Index.ets' // 引入共享包library中的命名路由页面
@Entry
@Component
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562700449.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562700449.png
index 9c2b84e0e070e67613504dcb52ea02acb6ed72b9..da349d8e58a9acbf6375ab921261ffcacdde9c5d 100644
Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562700449.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562700449.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562820813.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562820813.png
index 20ddfe6941c5313b1054f1d479da8b24014c3928..f115a300f68cf764d3e29115f803741a5a3f973a 100644
Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562820813.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562820813.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562940505.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562940505.png
index 3fc091e4e68bf1ef8c57ad082549e88b31d94caf..1cde8cb357d9c80cfeaa08e5e796f02ad1ff763e 100644
Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562940505.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001562940505.png differ