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 edee0fabe4bac1731669640c9c57586f93c7a2d3..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) | 否 | 组件区域变化时触发该回调。 |
+| 名称 | 支持冒泡 | 功能描述 |
+| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
+| 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 f5c85b867a12fe9b3ef69e092321e7164ee5a1df..b8331d8ab37137f432ed26bc9571d77e064b896c 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 d4e73c796b82ba6f00fe5e0b8b8672f688e276ce..1d33785bfecbd791f9af57fa8067c5835adb0ef8 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-flex-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md
index d5963c7077fab9a7b9077247a11da1e937296445..6758fe4f970938a92440f832248f6533d6ede562 100644
--- a/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md
+++ b/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)
```
- 
+
- 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)
```
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/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