update docs

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md

@@ -7,11 +7,6 @@
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 子组件
 
 无
@@ -19,27 +14,26 @@
 
 ## 接口
 
-Blank(min?:  number | string)
+Blank(min?: number | string)
 
 **参数：**
 
-| 参数名 | 参数类型         | 必填 | 默认值 | 参数描述                             |
-| ------ | ---------------- | ---- | ------ | ------------------------------------ |
-| min    | number \| string | 否   | 0      | 空白填充组件在容器主轴上的最小大小。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| min | number&nbsp;\|&nbsp;string | 否 | 空白填充组件在容器主轴上的最小大小。<br/>默认值：0 |
 
 ## 属性
 
-| 名称  | 参数类型                                    | 默认值   | 描述                     |
-| ----- | ------------------------------------------- | -------- | ------------------------ |
-| color | [ResourceColor](ts-types.md#resourcecolor8) | 0xffffff | 设置空白填充的填充颜色。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
->  **说明：**
->
->  不支持通用属性方法。
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| color | [ResourceColor](ts-types.md#resourcecolor) | 设置空白填充的填充颜色。 |
 
 
 ## 示例
-
+### 示例1
+Blank组件在横竖屏占满空余空间效果。
 ```ts
 // xxx.ets
 @Entry
@@ -64,3 +58,37 @@ struct BlankExample {
 横屏状态
 
 ![zh-cn_image_0000001174104388](figures/zh-cn_image_0000001174104388.gif)
+
+
+### 示例2
+Blank组件的父组件未设置宽度时，min参数的使用效果。
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct BlankExample {
+  build() {
+    Column({ space: 20 }) {
+      // blank父组件不设置宽度时，Blank失效，可以通过设置min最小宽度填充固定宽度
+      Row() {
+        Text('Bluetooth').fontSize(18)
+        Blank().color(Color.Yellow)
+        Toggle({ type: ToggleType.Switch })
+      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
+
+      Row() {
+        Text('Bluetooth').fontSize(18)
+        // 设置最小宽度为160
+        Blank('160').color(Color.Yellow)
+        Toggle({ type: ToggleType.Switch })
+      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
+      
+    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
+  }
+}
+```
+Blank父组件未设置宽度时，子组件间无空白填充，使用min参数设置填充尺寸
+
+![blankmin](figures/blankmin.png)
+

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

@@ -12,50 +12,50 @@
 
 ## 接口
 
-CheckboxGroup( options?: {group?: string} )
+CheckboxGroup(options?: { group?: string })
 
-创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。
+创建多选框群组，可以控制群组内的Checkbox全选或者不全选，group值相同的Checkbox和CheckboxGroup为同一群组。
 
-**参数：**
+**参数:**
 
-| 参数名 | 参数类型 | 必填 | 参数描述   |
-| ------ | -------- | ---- | ---------- |
-| group  | string   | 否   | 群组名称。 |
 
-## 属性
 
-| 名称            | 参数类型  | 默认值   | 描述               |
-| ------------- | ----- | ----- | ---------------- |
-| selectAll     | boolean  | false | 设置是否全选。          |
-| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | -     | 设置被选中或部分选中状态的颜色。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| group | string | 否 | 群组名称。|
 
-## 事件
+## 属性
 
-## onChange
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-onChange (callback:  (event: CheckboxGroupResult )  =>  void )
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| selectAll | boolean | 设置是否全选。<br/>默认值：false |
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置被选中或部分选中状态的颜色。 |
 
-CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。
+## 事件
 
-| 名称  | 参数类型            | 必填 | 描述                 |
-| ----- | ------------------- | ---- | -------------------- |
-| event | CheckboxGroupResult | 是   | 选中状态的回调结果。 |
+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
 
-## CheckboxGroupResult
+| 名称 | 功能描述 |
+| -------- | -------- |
+| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult对象说明)) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。|
 
-| 名称   | 参数类型            | 描述           |
-| ------ | ------------------- | -------------- |
-| name   | Array&lt;string&gt; | checkBox名称。 |
-| status | SelectStatus        | 选中状态。     |
+## CheckboxGroupResult对象说明
+| 名称     | 类型   | 描述      |
+| ------ | ------ | ------- |
+| name   | Array&lt;string&gt; | 群组内所有被选中的多选框名称。 |
+| status | [SelectStatus](#selectstatus枚举说明) | 选中状态。 |
 
 ## SelectStatus枚举说明
 
 | 名称  | 描述 |
-| ---- | ------------- |
+| ----- | -------------------- |
 | All   | 群组多选择框全部选择。 |
 | Part  | 群组多选择框部分选择。 |
 | None  | 群组多选择框全部没有选择。 |
 
+
 ## 示例
 
 ```ts
@@ -63,36 +63,57 @@ CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化
 @Entry
 @Component
 struct CheckboxExample {
-
   build() {
     Scroll() {
       Column() {
-        CheckboxGroup({group : 'checkboxGroup'})
+        // 全选按钮
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          CheckboxGroup({ group: 'checkboxGroup' })
             .selectedColor(0xed6f21)
-          .onChange((itemName:CheckboxGroupResult) => {
-            console.info("TextPicker::dialogResult is" + JSON.stringify(itemName))
+            .onChange((itemName: CheckboxGroupResult) => {
+              console.info("checkbox group content" + JSON.stringify(itemName))
             })
+          Text('Select All').fontSize(20)
+        }
+
+        // 选项1
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
-          .select(true)
             .selectedColor(0x39a2db)
             .onChange((value: boolean) => {
               console.info('Checkbox1 change is' + value)
             })
+          Text('Checkbox1').fontSize(20)
+        }
+
+        // 选项2
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
-          .select(false)
             .selectedColor(0x39a2db)
             .onChange((value: boolean) => {
               console.info('Checkbox2 change is' + value)
             })
+          Text('Checkbox2').fontSize(20)
+        }
+
+        // 选项3
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
-          .select(true)
             .selectedColor(0x39a2db)
             .onChange((value: boolean) => {
               console.info('Checkbox3 change is' + value)
             })
+          Text('Checkbox3').fontSize(20)
+        }
       }
     }
   }
 }
 ```
-![](figures/checkboxgroup.gif)
+多选框组三种状态图示：
+
+![](figures/checkboxgroup1.png)
+
+![](figures/checkboxgroup2.png)
+
+![](figures/checkboxgroup3.png)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md

@@ -2,41 +2,38 @@
 
 数据面板组件，用于将多个数据占比情况使用占比图进行展示。
 
-## 权限列表
+>  **说明：**
+>
+> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
 
-无
 
 ## 子组件
 
 无
 
+
 ## 接口
 
 DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
 
-**参数**: 
-
-| 参数名               | 参数类型          | 必填   | 默认值                  | 参数描述                                     |
-| ----------------- | ------------- | ---- | -------------------- | ---------------------------------------- |
-| values            | number[]      | 是    | -                    | 数据值列表，最大支持9个数据。                          |
-| max               | number        | 否    | 100                  | -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。 |
-| type<sup>8+</sup> | DataPanelType | 否    | DataPanelType.Circle | 数据面板的类型。                                 |
-
-## 属性
-
-| 名称        | 参数类型 | 默认值 | 描述                                 |
-| ----------- | -------- | ------ | ------------------------------------ |
-| closeEffect | boolean  | true   | 设置是否禁用数据比率图表的特殊效果。 |
+**参数:**
 
+| 参数名            | 参数类型   | 必填  | 参数描述 |
+| ----------------- | -------- | ----- | -------- |
+| values            | number[]   | 是    | 数据值列表，最大支持9个数据。 |
+| max               | number     | 否    |   -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。<br/>默认值：100 |
+| type<sup>8+</sup> | [DataPanelType](#datapaneltype枚举说明) | 否 | 数据面板的类型。<br/>默认值：DataPanelType.Circle |
 
 
 ## DataPanelType枚举说明
-
 | 名称 | 描述 | 
-| ------ | ------- |
+| -------| ------------ |
 | Line   | 线型数据面板。 | 
 | Circle | 环形数据面板。 |
 
+
 ## 示例
 
 ```ts

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md

@@ -6,32 +6,33 @@
 >
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-## 权限列表
-
-无
 
 ## 子组件
 
 无
 
+
 ## 接口
 
 Divider()
 
 ## 属性
 
-| 名称        | 参数类型                                                  | 默认值            | 描述                                                         |
-| ----------- | --------------------------------------------------------- | ----------------- | ------------------------------------------------------------ |
-| vertical    | boolean                                                   | false             | 使用水平分割线还是垂直分割线，false: 水平分割线， true:垂直分割线。 |
-| color       | [ResourceColor](ts-types.md#resourcecolor8)               | -                 | 设置分割线颜色。                                             |
-| strokeWidth | number \| string                                          | 1                 | 设置分割线宽度。                                             |
-| lineCap     | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置分割线条的端点样式。                                     |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称      | 参数类型         | 描述        |
+| ----------- | ---------- | ------------------ |
+| vertical    | boolean | 使用水平分割线还是垂直分割线。false:&nbsp;水平分割线，&nbsp;true:&nbsp;垂直分割线。<br/>默认值：false |
+| color       | [ResourceColor](ts-types.md#resourcecolor) | 分割线颜色。 |
+| strokeWidth | number&nbsp;\|&nbsp;string | 分割线宽度。<br/>默认值：1 |
+| lineCap     | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。<br/>默认值：LineCapStyle.Butt |
 
 
 ## 事件
 
 不支持通用事件。
 
+
 ## 示例
 
 ```ts
@@ -46,6 +47,7 @@ struct DividerExample {
       Divider()
       Row().width('100%').height(40).backgroundColor(0xF1F3F5)
 
+      // 纵向分割线
       Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
       Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
         Text('bravery')
@@ -55,6 +57,7 @@ struct DividerExample {
         Text('upward')
       }.width(250)
 
+      // 设置分割线宽度和端点样式
       Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC)
       Row().width('100%').height(40).backgroundColor(0xF1F3F5)
       Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md

@@ -2,14 +2,17 @@
 
 数据量规图表组件，用于将数据展示为环形图表。
 
+
 >  **说明：**
 >
 >  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
+
 ## 子组件
 
 无
 
+
 ## 接口
 
 Gauge(options:{value: number, min?: number, max?: number})
@@ -17,20 +20,22 @@ Gauge(options:{value: number, min?: number, max?: number})
 **参数：**
 
 | 参数名 | 参数类型 | 必填 | 参数描述 |
-| ------ | -------- | ---- | ---------------------------------- |
-| value  | number   | 是   | 当前数据值。                       |
+| -------- | -------- | -------- | -------- |
+| value | number | 是 | 量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。 |
 | min | number | 否 | 当前数据段最小值。<br/>默认值：0 |
 | max | number | 否 | 当前数据段最大值。<br/>默认值：100 |
 
 ## 属性
 
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
 | 名称 | 参数类型 | 描述 |
-| ----------- | ---------------------------------------- | --------------------------- |
-| value       | number                                   | 设置当前数据图表的值。<br/>默认值：0       |
-| startAngle  | number                                    | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：-150 |
-| endAngle    | number                                    | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：150 |
-| colors      | Array&lt;ColorStop&gt; | 设置图表的颜色，支持分段颜色设置。       |
-| strokeWidth | [Length](ts-types.md#length)       | 设置环形图表的环形厚度。                |
+| -------- | -------- | -------- |
+| value | number | 设置量规图的数据值，可用于动态修改量规图的数据值。<br/>默认值：0 |
+| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：0 |
+| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：360 |
+| colors | Array&lt;[ColorStop](#colorstop)&gt; | 设置量规图的颜色，支持分段颜色设置。 |
+| strokeWidth | Length | 设置环形量规图的环形厚度。 |
 
 ## ColorStop
 
@@ -38,7 +43,7 @@ Gauge(options:{value: number, min?: number, max?: number})
 
 | 名称      | 类型定义             | 描述                                                         |
 | --------- | -------------------- | ------------------------------------------------------------ |
-| ColorStop | [[ResourceColor](ts-types.md#resourcecolor8),&nbsp;number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 |
+| ColorStop | [[ResourceColor](ts-types.md#resourcecolor),&nbsp;number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 |
 
 
 ## 示例
@@ -50,15 +55,30 @@ Gauge(options:{value: number, min?: number, max?: number})
 @Component
 struct GaugeExample {
   build() {
-    Column() {
-      Gauge({ value: 50, min: 0, max: 100 })
-        .startAngle(210).endAngle(150)
-        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]])
-        .strokeWidth(20)
+    Column({ space: 20 }) {
+      // 使用默认的min和max为0-100，角度范围默认0-360，value值设置
+      // 参数中设置当前值为75
+      Gauge({ value: 75 })
         .width(200).height(200)
+        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+      
+      // 参数设置当前值为75，属性设置值为25，属性设置优先级高
+      Gauge({ value: 75 })
+        .value(25) //属性和参数都设置时以参数为准
+        .width(200).height(200)
+        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+      
+      // 210--150度环形图表
+      Gauge({ value: 30, min: 0, max: 100 })
+        .startAngle(210)
+        .endAngle(150)
+        .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]])
+        .strokeWidth(20)
+        .width(200)
+        .height(200)
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
 
-![zh-cn_image_0000001174422916](figures/zh-cn_image_0000001174422916.png)
+![gauge](figures/gauge-image.png)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md

@@ -18,19 +18,20 @@ Navigation()
 
 创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。
 
-
 ## 属性
 
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
 | 名称             | 参数类型                                     | 描述                                       |
 | -------------- | ---------------------------------------- | ---------------------------------------- |
 | title          | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面标题。                                    |
-| subtitle       | string                                   | 页面副标题。                                   |
-| menus          | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。                                 |
-| titleMode      | NavigationTitleMode                      | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free |
-| toolBar        | object&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。     |
-| hideToolBar    | boolean                                  | 设置隐藏/显示工具栏：<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
-| hideTitleBar   | boolean                                  | 隐藏标题栏。<br/>默认值：false                     |
-| hideBackButton | boolean                                  | 隐藏返回键。<br/>默认值：false                     |
+| subTitle       | string                                   | 页面副标题。                                   |
+| menus          | Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。      |
+| titleMode      | [NavigationTitleMode](#navigationtitlemode枚举说明)                      | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free |
+| toolBar        | [object](#object类型说明)&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。     |
+| hideToolBar    | boolean                                  | 隐藏工具栏：<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
+| hideTitleBar   | boolean                                  | 隐藏标题栏。<br/>默认值：false<br/>true:&nbsp;隐藏标题栏。<br/>false:&nbsp;显示标题栏。 |
+| hideBackButton | boolean                                  | 隐藏返回键。<br/>默认值：false<br/>true:&nbsp;隐藏返回键。<br/>false:&nbsp;显示返回键。 |
 
 ## NavigationMenuItem类型说明
 
@@ -40,7 +41,7 @@ Navigation()
 | icon   | string                  | 否   | 菜单栏单个选项的图标资源路径。 |
 | action | ()&nbsp;=&gt;&nbsp;void | 否   | 当前选项被选中的事件回调。     |
 
-## Object类型说明
+## object类型说明
 
 | 名称   | 类型                    | 必填 | 描述                           |
 | ------ | ----------------------- | ---- | ------------------------------ |
@@ -57,9 +58,9 @@ Navigation()
 | Full | 固定为大标题模式（主副标题）。                          |
 
 >  **说明：**
->
 > 目前可滚动组件只支持List。
 
+
 ## 事件
 
 | 名称                                       | 功能描述                                     |
@@ -70,7 +71,7 @@ Navigation()
 ## 示例
 
 ```ts
-// Example 01
+// xxx.ets
 @Entry
 @Component
 struct NavigationExample {
@@ -158,7 +159,7 @@ struct NavigationExample {
 ![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif)
 
 ```ts
-// Example 02
+// xxx.ets
 @Entry
 @Component
 struct ToolbarBuilderExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md

@@ -14,18 +14,18 @@
 
 ## 接口
 
-Progress(options: {value: number, total?: number, style?: ProgressStyle, type?: ProgressType})
+Progress(options: {value: number, total?: number, type?: ProgressType})
 
 创建进度组件，用于显示内容加载或操作处理进度。
 
-**参数：** 
+**参数:**
 
 | 参数名 | 参数类型 | 必填 | 参数描述 |
-| -------------------------- | ------------- | ---- | ------------------------------------------------------------ |
+| -------- | -------- | -------- | -------- |
 | value | number | 是 | 指定当前进度值。 |
 | total | number | 否 | 指定进度总长。<br/>默认值：100 |
-| type<sup>8+</sup>          | ProgressType  | 否   | 指定进度条类型。<br/>默认值：ProgressType.Linear             |
-| style<sup>deprecated</sup> | ProgressStyle | 否   | 指定进度条类型。<br/>该参数从API Version8开始废弃，建议使用type替代。<br/>默认值：ProgressStyle.Linear |
+| type<sup>8+</sup> | [ProgressType](#progresstype枚举说明) | 否 | 指定进度条类型。<br/>默认值：ProgressType.Linear |
+| style<sup>deprecated</sup> | [ProgressStyle](#progressstyle枚举说明) | 否 | 指定进度条样式。<br/>该参数从API Version8开始废弃，建议使用type替代。<br/>默认值：ProgressStyle.Linear |
 
 ## ProgressType枚举说明
 
@@ -50,10 +50,10 @@ Progress(options: {value: number, total?: number, style?: ProgressStyle, type?:
 ## 属性
 
 | 名称 | 参数类型 | 描述 |
-| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| -------- | -------- | -------- |
 | value | number | 设置当前进度值。 |
-| color              | [ResourceColor](ts-types.md#resourcecolor8)                  | 设置进度条前景色。                                           |
-| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](ts-types.md#length)<br/>} | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
+| color | [ResourceColor](ts-types.md#resourcecolor) | 设置进度条前景色。 |
+| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](ts-types.md#length)<br/>} | 定义组件的样式。<br/>-&nbsp;strokeWidth:&nbsp;设置进度条宽度。<br/>-&nbsp;scaleCount:&nbsp;设置环形进度条总刻度数。<br/>-&nbsp;scaleWidth:&nbsp;设置环形进度条刻度粗细，刻度粗细大于进度条宽度时，为系统默认粗细。 |
 
 
 ## 示例
@@ -69,6 +69,7 @@ struct ProgressExample {
       Progress({ value: 10, type: ProgressType.Linear }).width(200)
       Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)
 
+
       Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Row({ space: 40 }) {
         Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
@@ -83,6 +84,16 @@ struct ProgressExample {
           .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
       }
 
+      // scaleCount和scaleWidth效果对比
+      Row({ space: 40 }) {
+        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
+          .color(Color.Grey).value(50).width(100)
+          .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })
+        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
+          .color(Color.Grey).value(50).width(100)
+          .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })
+      }
+
       Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Row({ space: 40 }) {
         Progress({ value: 10, type: ProgressType.Ring }).width(100)
@@ -105,4 +116,4 @@ struct ProgressExample {
 }
 ```
 
-![zh-cn_image_0000001198839004](figures/zh-cn_image_0000001198839004.gif)
+![progress](figures/progress.png)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md

 # QRCode
 
-显示二维码信息。
+用于显示单个二维码的组件。
 
 >  **说明：**
->
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 子组件
 
 无
@@ -21,18 +15,20 @@
 
 QRCode(value: string)
 
-**参数：**
+**参数:**
 
-| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述      |
-| ----- | ------ | ---- | ---- | --------- |
-| value | string | 是    | -    | 二维码内容字符串。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| value | string | 是 | 二维码内容字符串。 |
 
 ## 属性
 
-| 名称            | 参数类型                                    | 默认值 | 描述                   |
-| --------------- | ------------------------------------------- | ------ | ---------------------- |
-| color           | [ResourceColor](ts-types.md#resourcecolor8) | Black  | 设置二维码颜色。       |
-| backgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | White  | 设置二维码的背景颜色。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性。
+
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| color | [ResourceColor](ts-types.md#resourcecolor) | 设置二维码颜色。<br/>默认值：Color.Black |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置二维码背景颜色。<br/>默认值：Color.White |
 
 
 ## 事件
@@ -48,17 +44,21 @@ QRCode(value: string)
 @Component
 struct QRCodeExample {
   private value: string = 'hello world'
-
   build() {
     Column({ space: 5 }) {
-      Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
       QRCode(this.value).width(200).height(200)
 
-      Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      // 设置二维码颜色
+      Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
       QRCode(this.value).color(0xF7CE00).width(200).height(200)
+
+      // 设置二维码背景色
+      Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
+      QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
 
-![zh-cn_image_0000001219662669](figures/zh-cn_image_0000001219662669.png)
+![qrcode](figures/qrcode.png)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md

@@ -7,11 +7,6 @@
 >  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 子组件
 
 可以包含单个子组件。
@@ -23,11 +18,11 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
 
 **参数：**
 
-| 参数名       | 参数类型                                     | 必填   | 默认值                         | 参数描述                    |
-| --------- | ---------------------------------------- | ---- | --------------------------- | ----------------------- |
-| scroller  | [Scroller](ts-container-scroll.md#scroller) | 是    | -                           | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
-| direction | ScrollBarDirection                       | 否    | ScrollBarDirection.Vertical | 滚动条的方向，控制可滚动组件对应方向的滚动。  |
-| state     | [BarState](ts-appendix-enums.md#barstate)        | 否    | BarState.Auto               | 滚动条状态。                  |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
+| direction | [ScrollBarDirection](#scrollbardirection枚举说明) | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。<br/>默认值：ScrollBarDirection.Vertical |
+| state | [BarState](ts-appendix-enums.md#barstate) | 否 | 滚动条状态。<br/>默认值：BarState.Auto |
 
 >  **说明：**
 > ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。
@@ -37,7 +32,7 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
 ## ScrollBarDirection枚举说明
 
 | 名称 | 描述 |
-| ---------- | ------ |
+| -------- | -------- |
 | Vertical | 纵向滚动条。 |
 | Horizontal | 横向滚动条。 |
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md

@@ -12,34 +12,35 @@
 
 ## 接口
 
-Select(options: Array\<SelectOption\>)
+Select(options: Array\<[SelectOption](#selectoption对象说明)\>)
+
+## SelectOption对象说明
 
-**SelectOption对象说明：**
 | 参数名 | 参数类型                            | 必填 | 参数描述       |
-| ----- | ----------------------------------- | ---- | ------- |
-| value | [ResourceStr](ts-types.md#resourcestr8) | 是    | 下拉选项内容。 |
-| icon  | [ResourceStr](ts-types.md#resourcestr8) | 否    | 下拉选项图片。 |
+| ------ | ----------------------------------- | ---- | -------------- |
+| value  | [ResourceStr](ts-types.md#resourcestr) | 是   | 下拉选项内容。 |
+| icon   | [ResourceStr](ts-types.md#resourcestr) | 否   | 下拉选项图片。 |
 
 ## 属性
 
 | 名称                    | 参数类型                              | 描述                                          |
-| ----------------------- | ------------------------------------------- | --------------------------------------------- |
+| ----------------------- | ------------------------------------- | --------------------------------------------- |
 | selected                | number                                | 设置下拉菜单初始选项的索引，第一项的索引为0。 |
-| value                   | string                                      | 设置下拉按钮本身的文本显示。                  |
+| value                   | string                                | 设置下拉按钮本身的文本内容。                  |
 | font                    | [Font](ts-types.md#font)          | 设置下拉按钮本身的文本样式。                  |
-| fontColor               | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉按钮本身的文本颜色。                  |
-| selectedOptionBgColor   | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉菜单选中项的背景色。                  |
+| fontColor               | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉按钮本身的文本颜色。                  |
+| selectedOptionBgColor   | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单选中项的背景色。                  |
 | selectedOptionFont      | [Font](ts-types.md#font)          | 设置下拉菜单选中项的文本样式。                |
-| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉菜单选中项的文本颜色。                |
-| optionBgColor           | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉菜单项的背景色。                      |
+| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单选中项的文本颜色。                |
+| optionBgColor           | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单项的背景色。                      |
 | optionFont              | [Font](ts-types.md#font)          | 设置下拉菜单项的文本样式。                    |
-| optionFontColor         | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉菜单项的文本颜色。                    |
+| optionFontColor         | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单项的文本颜色。                    |
 
 ## 事件
 
 | 名称                                                         | 功能描述                                                     |
-| ---------------------------------------- | -------------------------------------- |
-| onSelect(callback: (index: number, value?:string) => void) | 下拉菜单选中某一项的回调。index：选中项的索引。value：选中项的值。 |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onSelect(callback: (index: number, value?:&nbsp;string) => void) | 下拉菜单选中某一项的回调。<br/>index：选中项的索引。<br/>value：选中项的值。 |
 
 ##  示例
 
@@ -50,16 +51,16 @@ Select(options: Array\<SelectOption\>)
 struct SelectExample {
   build() {
     Column() {
-      Select([{value:'aaa',icon: "/common/1.png"},
-              {value:'bbb',icon: "/common/2.png"},
-              {value:'ccc',icon: "/common/3.png"},
-              {value:'ddd',icon: "/common/4.png"}])
+      Select([{ value: 'aaa', icon: "/common/1.png" },
+              { value: 'bbb', icon: "/common/2.png" },
+              { value: 'ccc', icon: "/common/3.png" },
+              { value: 'ddd', icon: "/common/4.png" }])
         .selected(2)
         .value('TTT')
-        .font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal })
-        .selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
-        .optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
-        .onSelect((index:number)=>{
+        .font({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
+        .selectedOptionFont({ size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
+        .optionFont({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
+        .onSelect((index: number) => {
           console.info("Select:" + index)
         })
     }

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md

 # Span
 
-文本段落，只能作为Text子组件，呈现一段文本信息。
+作为Text组件的子组件，用于显示行内文本的组件。
 
 >  **说明：**
 >
@@ -16,26 +16,27 @@
 
 Span(value: string | Resource)
 
-**参数:**
+**参数：**
 
 | 参数名 | 参数类型 | 必填 | 参数描述 |
-| ------ | ---------------------------------------------------- | ---- | ---------- |
-| value  | string \| [Resource](ts-types.md#resource) | 是   | 文本内容。 |
+| -------- | -------- | -------- | -------- |
+| value | string \| [Resource](ts-types.md#resource) | 是 | 文本内容。 |
+
 
 ## 属性
 
-通用属性方法仅支持通用文本样式，不支持触摸热区设置。
+通用属性方法仅支持[通用文本样式](ts-universal-attributes-text-style.md)。
 
 | 名称 | 参数类型 | 描述 |
-| ---------- | ---------------------------------------- | -------------- |
-| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} |
-| letterSpacing       | number \| string | 设置文本字符间距。                                 |
-| textCase   | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br/>默认值：Normal |
+| -------- | -------- | -------- |
+| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} |
+| letterSpacing       | number \| string  | 设置文本字符间距。取值小于0，字符聚集重叠，取值大于0且随着数值变大，字符间距越来越大，稀疏分布。                                |
+| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br/>默认值：TextCase.Normal |
 
 
 ## 事件
 
-通用事件仅支持点击事件。
+通用事件仅支持[点击事件](ts-universal-attributes-click.md)。
 
 >  **说明：**
 >
@@ -57,29 +58,59 @@ struct SpanExample {
           .decoration({ type: TextDecorationType.None, color: Color.Red })
       }
 
+      // 文本横线添加
       Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)
       Text() {
         Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12)
       }
+
       Text() {
-        Span('I am LineThrough-span').decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(12)
+        Span('I am LineThrough-span')
+          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
+          .fontSize(12)
       }
+
       Text() {
         Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12)
       }
 
+      // 文本字符间距
+      Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC)
+      Text() {
+        Span('span letter spacing')
+          .letterSpacing(0)
+          .fontSize(12)
+      }
+
+      Text() {
+        Span('span letter spacing')
+          .letterSpacing(-2)
+          .fontSize(12)
+      }
+
+      Text() {
+        Span('span letter spacing')
+          .letterSpacing(3)
+          .fontSize(12)
+      }
+
+
+      // 文本大小写展示设置
       Text('Text Case').fontSize(9).fontColor(0xCCCCCC)
       Text() {
-        Span('I am Lower-span').textCase(TextCase.LowerCase).fontSize(12)
-          .decoration({ type: TextDecorationType.None, color: Color.Red })
+        Span('I am Lower-span').fontSize(12)
+          .textCase(TextCase.LowerCase)
+          .decoration({ type: TextDecorationType.None })
       }
+
       Text() {
-        Span('I am Upper-span').textCase(TextCase.UpperCase).fontSize(12)
-          .decoration({ type: TextDecorationType.None, color: Color.Red })
+        Span('I am Upper-span').fontSize(12)
+          .textCase(TextCase.UpperCase)
+          .decoration({ type: TextDecorationType.None })
       }
     }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })
   }
 }
 ```
 
-![zh-cn_image_0000001219982709](figures/zh-cn_image_0000001219982709.gif)
+![span](figures/span.png)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md

 # Text
 
-文本，用于呈现一段信息。
+显示一段文本的组件。
 
 >  **说明：**
 >
@@ -19,28 +19,29 @@ Text(content?: string | Resource)
 **参数：**
 
 | 参数名 | 参数类型 | 必填 | 参数描述 |
-| ------- | ------------------------------------------ | ---- | ------------------------------------------------------------ |
+| -------- | -------- | -------- | -------- |
 | content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。<br/>默认值：' ' |
 
 ## 属性
 
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
 | 名称                       | 参数类型                            | 描述                                               |
-| -------------- | ---------------------------------------- | ---------------------------------------- |
+| ----------------------- | ----------------------------------- | ------------------------------------------- |
 | textAlign               | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。<br/>默认值：TextAlign.Start |
-| textOverflow   | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)}            | 设置文本超长时的显示方式。<br/>默认值：{overflow:&nbsp;TextOverflow.Clip}<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
-| maxLines       | number                                   | 设置文本的最大行数。<br/>默认值：Infinity              |
+| textOverflow            | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值：{overflow:&nbsp;TextOverflow.Clip}<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。<br />需配合`maxLines`使用，单独设置不生效。 |
+| maxLines                | number | 设置文本的最大行数。<br />默认值：Infinity<br/>**说明：**<br />默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过        `textOverflow`来指定截断方式。 |
 | lineHeight              | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md#resource)  | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
-| decoration     | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} |
-| baselineOffset | number \| string | 设置文本基线的偏移量。                              |
-| letterSpacing       | number \| string | 设置文本字符间距。                                 |
+| decoration              | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br />默认值：{<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} |
+| baselineOffset          | number&nbsp;\|&nbsp;string | 设置文本基线的偏移量。                              |
+| letterSpacing           | number&nbsp;\|&nbsp;string | 设置文本字符间距。                                 |
 | minFontSize             | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)      | 设置文本最小显示字号。                                 |
 | maxFontSize             | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)      | 设置文本最大显示字号。                                 |
-| textCase       | [TextCase](ts-appendix-enums.md#textcase)          | 设置文本大小写。<br/>默认值：TextCase.Normal         |
-
+| textCase                | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br />默认值：TextCase.Normal |
 
 >  **说明：**
 >
->  不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。
+>  不支持Text内同时存在文本内容和Span子组件。如果同时存在，只显示Span内的内容。
 
 
 ## 示例

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md

 # TextClock
 
-TextClock通过文本显示当前系统时间，支持不同时区的时间显示，时间显示最高精度到秒级。
+TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。
 
-> **说明：** 
+>**说明：**
 >
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-## 权限列表
-
-无
+>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 ## 子组件
 
@@ -16,26 +12,15 @@ TextClock通过文本显示当前系统时间，支持不同时区的时间显
 
 ## 接口
 
-TextClock(options?: {timeZoneOffset?: number, controller?: TextClockController})
-
-**参数:**
-
-| 参数名         | 参数类型                                    | 必填 | 默认值     | 参数描述                                                     |
-| -------------- | ------------------------------------------- | ---- | ---------- | ------------------------------------------------------------ |
-| timeZoneOffset | number                                      | 否   | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8；对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 |
-| controller     | [TextClockController](#textclockcontroller) | 否   | null       | 绑定一个控制器，用来控制文本时钟的状态。                     |
-
-## 属性
+TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController })
 
-| 名称   | 参数类型 | 默认值 | 描述                                                         |
-| ------ | -------- | ------ | ------------------------------------------------------------ |
-| format | string   | 'hms'  | 设置显示时间格式。<br/>日期间隔符固定为"/"，时间间隔符为":"。<br/>如yyyyMMdd，yyyy-MM-dd显示为yyyy/MM/dd，<br/>hhmmss显示为hh:mm:ss。 <br/>时间格式只用写一位即可，如"hhmmss"等同于"hms"。<br/>支持的时间格式化字符串：<br/>- YYYY/yyyy：完整年份。<br/>- YY/yy：年份后两位。<br/>- M：月份(若想使用01月则使用MM)。<br/>- d：日期(若想使用01日则使用dd)。<br/>- D：年中日(一年中的第几天)。<br/>- H：24小时制。<br/>- h：12小时制。<br/>- m：分钟。<br/>- s：秒。<br/>- SSS：毫秒。 |
+**参数：** 
 
-## 事件
+| 参数名            | 参数类型      | 必填     | 参数描述                                                     |
+| -------------- | -------- | ------ | --------------------------------------------------------------------------- |
+| timeZoneOffset | number   | 否     | 设置时区偏移量。<br>取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8。<br>对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间，当设置的值不在取值范围内时，将使用当前系统的时区偏移量。<br/>默认值：当前系统的时区偏移量 |
+| controller     | [TextClockController](#textclockcontroller) | 否      | 绑定一个控制器，用来控制文本时钟的状态。|
 
-| 名称                                       | 功能描述                                     |
-| ---------------------------------------- | ---------------------------------------- |
-| onDateChange(event: (value: number) => void) | 提供时间变化回调,该事件最小回调间隔为秒。<br /> value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 |
 
 ## TextClockController
 
@@ -43,9 +28,8 @@ TextClock容器组件的控制器，可以将此对象绑定到TextClock组件
 
 ### 导入对象
 
-```
-controller: TextClockController = new TextClockController()
-
+```ts
+controller: TextClockController = new TextClockController();
 ```
 
 ### start
@@ -61,35 +45,54 @@ stop()
 停止文本时钟。
 
 
+## 属性
+
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称   | 参数类型    | 描述                                                         |
+| ------ | --------------- | ------------------------------------------------------------ |
+| format | string    | 设置显示时间格式。<br/>日期间隔符固定为"/"，时间间隔符为":"。<br/>如yyyyMMdd，yyyy-MM-dd显示为yyyy/MM/dd，<br/>hhmmss显示为hh:mm:ss。 <br/>时间格式只用写一位即可，如"hhmmss"等同于"hms"。<br/>支持的时间格式化字符串：<br/>- YYYY/yyyy：完整年份。<br/>- YY/yy：年份后两位。<br/>- M：月份(若想使用01月则使用MM)。<br/>- d：日期(若想使用01日则使用dd)。<br/>- D：年中日(一年中的第几天)。<br/>- H：24小时制。<br/>- h：12小时制。<br/>- m：分钟。<br/>- s：秒。<br/>- SSS：毫秒。<br/>默认值： 'hms'|
+
+## 事件
+
+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
+
+| 名称                                         | 功能描述                                                     |
+| -------------------------------------------- | ------------------------------------------------------------ |
+| onDateChange(event: (value: number) => void) | 提供时间变化回调，该事件最小回调间隔为秒。<br /> value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 |
+
+
 ## 示例
 
 ```ts
-// xxx.ets
 @Entry
 @Component
 struct Second {
-  @State accumulateTime: number = 0
-  controller: TextClockController = new TextClockController()
-
+  @State accumulateTime: number = 0;
+  // 导入对象
+  controller: TextClockController = new TextClockController();
   build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
-        Text('current milliseconds is' + this.accumulateTime)
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Text('Current milliseconds is ' + this.accumulateTime)
         .fontSize(20)
-        TextClock({timeZoneOffset: -8, controller: this.controller})
-          .format('hhmmss')
+      // 以12小时制显示东八区的系统时间，精确到秒。
+      TextClock({ timeZoneOffset: -8, controller: this.controller })
+        .format('hms')
         .onDateChange((value: number) => {
-            this.accumulateTime = value
+          this.accumulateTime = value;
         })
         .margin(20)
         .fontSize(30)
       Button("start TextClock")
         .margin({ bottom: 10 })
-          .onClick(()=>{
-            this.controller.start()
+        .onClick(() => {
+          // 启动文本时钟
+          this.controller.start();
         })
       Button("stop TextClock")
-          .onClick(()=>{
-            this.controller.stop()
+        .onClick(() => {
+          // 停止文本时钟
+          this.controller.stop();
         })
     }
     .width('100%')
@@ -97,5 +100,5 @@ struct Second {
   }
 }
 ```
-![](figures/text_clock.png)
+![text_clock](figures/text_clock.gif)
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md

 # TextPicker
 
-文本类滑动选择器组件。
+滚动选择文本的组件。
 
 >  **说明：**
 >
@@ -14,29 +14,30 @@
 
 ## 接口
 
-TextPicker(options?: {range: string[] | [Resource](ts-types.md#resource), selected?: number, value?: string})
+TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string})
 
 根据range指定的选择范围创建文本选择器。
 
 **参数：**
 
 | 参数名 | 参数类型 | 必填 | 参数描述 |
-| -------- | -------- | ---- | --------------- |
-| range    | string[] \| [Resource](ts-types.md#resource) | 是    | 选择器的数据选择范围。     |
-| selected | number   | 否    | 选中项在数组中的index值。<br/>默认值：0 |
-| value | string | 否 | 选中项的值，优先级低于selected。<br/>默认值：第一个元素值 |
+| -------- | -------- | -------- | -------- |
+| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择列表。 |
+| selected | number | 否 | 设置默认选中项在数组中的index值。<br/>默认值：0 |
+| value | string | 否 | 设置默认选中项的值，优先级低于selected。<br/>默认值：第一个元素值 |
 
 ## 属性
 
 | 名称 | 参数类型 | 描述 |
-| ----------------------- | ---------------- | -------------------------- |
+| -------- | -------- | -------- |
 | defaultPickerItemHeight | number \| string | 默认Picker内容项元素高度。 |
 
-
 ## 事件
 
+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
+
 | 名称 | 描述 |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| -------- | -------- |
 | onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的索引值。 |
 
 

zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md

 # Badge
 
+可以附加在单个组件上用于信息标记的容器组件。
+
 >  **说明：**
->
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-新事件标记组件，在组件上提供事件信息展示能力。
-
-
-## 权限列表
-
-无
-
-
 ## 子组件
 
 支持单个子组件。
@@ -20,48 +13,46 @@
 
 ## 接口
 
-方法1：Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})
+**方法1：** Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})
 
 创建数字标记组件。
 
 **参数：**
-
 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-| -------- | ------------- | ---- | ---------------------- | --------------------------------- |
+| -------- | -------- | -------- | -------- | -------- |
 | count | number | 是 | - | 设置提醒消息数。 |
-| position | BadgePosition | 否    | BadgePosition.RightTop | 设置提示点显示位置。                        |
+| position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
 | maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 |
-| style    | BadgeStyle    | 是    | -                      | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
+| style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
 
-方法2： Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
+**方法2：** Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
 
 根据字符串创建标记组件。
 
 **参数：**
 
 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-| -------- | ------------- | ---- | ---------------------- | --------------------------------- |
+| -------- | -------- | -------- | -------- | -------- |
 | value | string | 是 | - | 提示内容的文本字符串。 |
-| position | BadgePosition | 否    | BadgePosition.RightTop | 设置提示点显示位置。                        |
-| style    | BadgeStyle    | 是    | -                      | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
-
-## BadgeStyle对象说明
-
-| 名称       | 类型                                        | 必填 | 默认值      | 描述          |
-| ---------- | ------------------------------------------- | ---- | ----------- | ------------- |
-| color      | [ResourceColor](ts-types.md#resourcecolor8) | 否   | Color.White | 文本颜色。    |
-| fontSize   | number \| string                  | 否   | 10          | 文本大小。    |
-| badgeSize  | number \| string                  | 否   | -           | badge的大小。 |
-| badgeColor | [ResourceColor](ts-types.md#resourcecolor8) | 否   | Color.Red   | badge的颜色。 |
+| position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
+| style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
 
 ## BadgePosition枚举说明
 
 | 名称 | 描述 |
-| -------- | ------------ |
+| -------- | -------- |
 | RightTop | 圆点显示在右上角。 |
 | Right | 圆点显示在右侧纵向居中。 |
 | Left | 圆点显示在左侧纵向居中。 |
 
+## BadgeStyle对象说明
+| 名称 | 类型 | 必填 | 默认值 | 描述 |
+  | -------- | -------- | -------- | -------- | -------- |
+| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.White | 文本颜色。 |
+| fontSize | number \| string | 否 | 10 | 文本大小。 |
+| badgeSize | number \| string | 是 | - | badge的大小。 |
+| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.Red | badge的颜色。 |
+
 ## 示例
 
 ```ts
@@ -69,44 +60,92 @@
 @Entry
 @Component
 struct BadgeExample {
-  @State counts: number = 1
-  @State message: string = 'new'
+  @State counts: number = 1;
+  @State message: string = 'new';
 
   build() {
-    Flex({ justifyContent: FlexAlign.SpaceAround }) {
+    Column() {
+      Text('numberBadge').width('80%')
+      Row({ space: 10 }) {
+        // 数字上标，maxCount默认99,超过99展示99+
         Badge({
           count: this.counts,
           maxCount: 99,
+          position: BadgePosition.RightTop,
           style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
         }) {
           Button('message')
             .onClick(() => {
-            this.counts++
+              this.counts++;
             })
             .width(100).height(50).backgroundColor(0x317aff)
         }.width(100).height(50)
 
+        // 数字上标
+        Badge({
+          count: this.counts,
+          maxCount: 99,
+          position: BadgePosition.Left,
+          style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+        }) {
+          Button('message')
+            .onClick(() => {
+              this.counts++;
+            })
+            .width(100).height(50).backgroundColor(0x317aff)
+        }.width(100).height(50)
+
+
+        // 数字上标
+        Badge({
+          count: this.counts,
+          maxCount: 99,
+          position: BadgePosition.Right,
+          style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+        }) {
+          Button('message')
+            .onClick(() => {
+              this.counts++;
+            })
+            .width(100).height(50).backgroundColor(0x317aff)
+        }.width(100).height(50)
+      }.margin(10)
+
+      Text('stringBadge').width('80%')
+      Row({ space: 30 }) {
         Badge({
           value: this.message,
           style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue }
         }) {
           Text('message')
-          .width(80).height(50).fontSize(16).lineHeight(37)
-          .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED)
+            .width(80)
+            .height(50)
+            .fontSize(16)
+            .lineHeight(37)
+            .borderRadius(10)
+            .textAlign(TextAlign.Center)
+            .backgroundColor(0xF3F4ED)
         }.width(80).height(50)
 
+        // value为空，设置圆点标记
         Badge({
           value: '',
           position: BadgePosition.Right,
           style: { badgeSize: 6, badgeColor: Color.Red }
         }) {
           Text('message')
-          .width(90).height(50).fontSize(16).lineHeight(37)
-          .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED)
+            .width(90)
+            .height(50)
+            .fontSize(16)
+            .lineHeight(37)
+            .borderRadius(10)
+            .textAlign(TextAlign.Center)
+            .backgroundColor(0xF3F4ED)
         }.width(90).height(50)
-    }.width('100%').margin({ top: 5 })
+      }.margin(10)
+    }
   }
 }
 ```
 
-![zh-cn_image_0000001219864147](figures/zh-cn_image_0000001219864147.gif)
+![badge](figures/badge.png)

zh-cn/application-dev/reference/arkui-ts/ts-container-column.md

@@ -7,11 +7,6 @@
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 子组件
 
 可以包含子组件。
@@ -19,21 +14,22 @@
 
 ## 接口
 
-Column(value?:{space?: string | number})
+Column(value?: {space?: string | number})
 
 **参数：**
 
-| 参数名   | 参数类型           | 必填   | 默认值  | 参数描述      |
-| ----- | -------------- | ---- | ---- | --------- |
-| space | string\|number | 否    | 0    | 纵向布局元素间距。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| space | string&nbsp;\|&nbsp;number | 否 | 纵向布局元素垂直方向间距。<br/>默认值：0 |
 
 ## 属性
 
-| 名称                          | 参数类型                                     | 默认值                    | 描述                |
-| --------------------------- | ---------------------------------------- | ---------------------- | ----------------- |
-| alignItems                  | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 |
-| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start        | 设置子组件在垂直方向上的对齐格式。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。<br/>默认值：HorizontalAlign.Center |
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | 设置子组件在垂直方向上的对齐格式。<br/>默认值：FlexAlign.Start |
 
 ## 示例
 
@@ -44,12 +40,14 @@ Column(value?:{space?: string | number})
 struct ColumnExample {
   build() {
     Column() {
+      // 设置子元素垂直方向间距为5
       Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Column({ space: 5 }) {
         Column().width('100%').height(30).backgroundColor(0xAFEEEE)
         Column().width('100%').height(30).backgroundColor(0x00FFFF)
       }.width('90%').height(100).border({ width: 1 })
 
+      // 设置子元素水平方向对齐方式
       Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Column() {
         Column().width('50%').height(30).backgroundColor(0xAFEEEE)
@@ -62,20 +60,27 @@ struct ColumnExample {
         Column().width('50%').height(30).backgroundColor(0x00FFFF)
       }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
 
+      Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Column() {
+        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
+        Column().width('50%').height(30).backgroundColor(0x00FFFF)
+      }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
+      
+      // 设置子元素垂直方向的对齐方式
       Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Column() {
-          Column().width('30%').height(30).backgroundColor(0xAFEEEE)
-          Column().width('30%').height(30).backgroundColor(0x00FFFF)
-        }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center)
+        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
+        Column().width('90%').height(30).backgroundColor(0x00FFFF)
+      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
 
       Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Column() {
-          Column().width('30%').height(30).backgroundColor(0xAFEEEE)
-          Column().width('30%').height(30).backgroundColor(0x00FFFF)
-        }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End)
+        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
+        Column().width('90%').height(30).backgroundColor(0x00FFFF)
+      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
     }.width('100%').padding({ top: 5 })
   }
 }
 ```
 
-![zh-cn_image_0000001219982721](figures/Column.png)
+![column](figures/column.png)

zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md

@@ -3,14 +3,9 @@
 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。
 
 >  **说明：**
->
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
 
 ## 子组件
 
@@ -25,12 +20,13 @@ ColumnSplit()
 ## 属性
 
 | 名称 | 参数类型 | 描述 | 
-| ---------- | ------- | ------------------ |
+| -------- | -------- | -------- |
 | resizeable | boolean | 分割线是否可拖拽，默认为false。 | 
 
 >  **说明：**
 > 与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。
-
+>
+> 在真机中查看拖动效果，预览器中不支持拖动。
 
 ## 示例
 
@@ -49,7 +45,7 @@ struct ColumnSplitExample {
         Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
         Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
       }
-      .resizeable(true)
+      .resizeable(true) // 可拖动
       .width('90%').height('60%')
     }.width('100%')
   }

zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md

 # Counter
 
+计数器组件，提供相应的增加或者减少的计数操作。
+
 >  **说明：**
->
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-计数器组件，提供相应的增加或者减少的计数操作。
-
 
-## 权限列表
 
-无
 
 
 ## 子组件
@@ -28,7 +25,7 @@ Counter()
 不支持通用事件和手势， 仅支持如下事件：
 
 | 名称 | 功能描述 | 
-| ---------------------------------------- | --------- |
+| -------- | -------- |
 | onInc(event: () => void) | 监听数值增加事件。 | 
 | onDec(event: () => void) | 监听数值减少事件。 | 
 

zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md

@@ -16,14 +16,12 @@
 
 Navigator(value?: {target: string, type?: NavigationType})
 
-创建路由组件。
-
 **参数：**
 
 | 参数名 | 参数类型       | 必填 | 参数描述                                       |
 | ------ | -------------- | ---- | ---------------------------------------------- |
 | target | string         | 是   | 指定跳转目标页面的路径。     |
-| type   | NavigationType | 否   | 指定路由方式。<br/>默认值：NavigationType.Push |
+| type   | [NavigationType](#navigationtype枚举说明) | 否   | 指定路由方式。<br/>默认值：NavigationType.Push |
 
 ## NavigationType枚举说明
 
@@ -33,22 +31,25 @@ Navigator(value?: {target: string, type?: NavigationType})
 | Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 |
 | Back    | 返回上一页面或指定的页面。              |
 
+
 ## 属性
 
 | 名称   | 参数    | 描述                                                         |
 | ------ | ------- | ------------------------------------------------------------ |
 | active | boolean | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 |
-| params | object  | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
+| params | object  | 跳转时要同时传递到目标页面的数据，可在目标页面使用[router.getParams()](../apis/js-api-router.md#routergetparams)获得。 |
+| target | string         | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。                         |
+| type   | [NavigationType](#navigationtype枚举说明)  | 设置路由方式。<br/>默认值：NavigationType.Push |
 
 
 ## 示例
 
-```
-// Navigator Page
+```ts
+// Navigator.ets
 @Entry
 @Component
 struct NavigatorExample {
-  @State active: boolean = false
+  @State active: boolean = false;
   @State Text: object = {name: 'news'}
 
   build() {
@@ -56,27 +57,28 @@ struct NavigatorExample {
       Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
         Text('Go to ' + this.Text['name'] + ' page')
             .width('100%').textAlign(TextAlign.Center)
-      }.params({ text: this.Text })
+      }.params({ text: this.Text }) // 传参数到Detail页面
 
       Navigator() {
         Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
       }.active(this.active)
       .onClick(() => {
-        this.active = true
+        this.active = true;
       })
     }.height(150).width(350).padding(35)
   }
 }
 ```
 
-```
-// Detail Page
-import router from '@system.router'
+```ts
+// Detail.ets
+import router from '@ohos.router'
 
 @Entry
 @Component
 struct DetailExample {
-  @State text: any = router.getParams().text
+  // 接收Navigator.ets的传参
+  @State text: any = router.getParams().text;
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
@@ -93,8 +95,8 @@ struct DetailExample {
 
 ```
 
-```
-// Back Page
+```ts
+// Back.ets
 @Entry
 @Component
 struct BackExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md

 # Panel
 
-可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换，属于弹出式组件。
+可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。
 
 >  **说明：**
 >
@@ -19,24 +19,26 @@ Panel(show: boolean)
 **参数：**
 
 | 参数名 | 参数类型 | 必填 | 参数描述 |
-| ------ | -------- | ---- | --------------------- |
+| -------- | -------- | -------- | -------- |
 | show | boolean | 是 | 控制Panel显示或隐藏。 |
 
+
 ## 属性
 
 | 名称 | 参数类型 | 描述 |
-| ---------- | -------------- | ------------------------------------------------------------ |
-| type       | PanelType      | 设置可滑动面板的类型。<br/>默认值：PanelType.Foldable        |
-| mode       | PanelMode      | 设置可滑动面板的初始状态。                                   |
+| -------- | -------- | -------- |
+| type | [PanelType](#paneltype枚举说明) | 设置可滑动面板的类型。<br/>默认值：PanelType.Foldable |
+| mode | [PanelMode](#panelmode枚举说明) | 设置可滑动面板的初始状态。 |
 | dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。<br/>默认值：true |
-| fullHeight | number\|string | 指定PanelMode.Full状态下的高度。                             |
-| halfHeight | number\|string | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。       |
-| miniHeight | number\|string | 指定PanelMode.Mini状态下的高度。                             |
+| fullHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Full状态下的高度。 |
+| halfHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 |
+| miniHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Mini状态下的高度。 |
+| show | boolean | 当滑动面板弹出时调用。 |
 
 ## PanelType枚举说明
 
 | 名称 | 描述 |
-| --------- | ------------------------------------ |
+| -------- | -------- |
 | Minibar | 提供minibar和类全屏展示切换效果。 |
 | Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 |
 | Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 |
@@ -44,17 +46,18 @@ Panel(show: boolean)
 ## PanelMode枚举说明
 
 | 名称 | 描述 |
-| ---- | ---------------------------------------- |
+| -------- | -------- |
 | Mini | 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。 |
 | Half | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 |
 | Full | 类全屏状态。 |
 
+
 ## 事件
 
 | 名称 | 功能描述 |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| -------- | -------- |
 | onChange(event:&nbsp;(width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;mode:&nbsp;PanelMode)&nbsp;=&gt;&nbsp;void) | 当可滑动面板发生状态变化时触发，&nbsp;返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 |
-
+| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |当可滑动面板发生高度变化时触发，返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因，panel最高只能滑到 fullHeight-8vp。 |
 
 ## 示例
 
@@ -66,7 +69,7 @@ struct PanelExample {
   @State show: boolean = false
 
   build() {
-    Column() {
+    Stack() {
       Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
         .width('90%').height(50).borderRadius(10)
         .backgroundColor(0xFFFFFF).padding({ left: 20 })

zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md

 # Refresh
 
-下拉刷新容器。
+ 可以进行页面下拉操作并显示刷新动效的容器组件。 
 
 >  **说明：**
 >
 >  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-## 权限列表
-
-无
-
 ## 子组件
 
 支持单个子组件。
 
 ## 接口
 
-Refresh\(value: \{refreshing: boolean, offset?: number | string, friction?: number | string\}\)
+Refresh\(value: \{ refreshing: boolean, offset?:  number | string , friction?: number | string \}\)
 
 **参数：**
 
-| 参数         | 参数名                        | 必填   | 默认值  | 参数描述                                     |
-| ---------- | -------------------------- | ---- | ---- | ---------------------------------------- |
-| refreshing | boolean                    | 是    | -    | 当前组件是否正在刷新。                              |
-| offset     | Length                     | 否    | 16   | 刷新组件静止时距离父组件顶部的距离。                       |
-| friction   | number&nbsp;\|&nbsp;string | 否    | 62   | 下拉摩擦系数，取值范围为0到100。<br/>-&nbsp;0表示下拉刷新容器不跟随手势下拉而下拉。<br/>-&nbsp;100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>-&nbsp;数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。 |
+| 参数 | 参数名 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| refreshing | boolean | 是 | 当前组件是否正在刷新。<br/>该参数支持[$$](../../ui/ts-syntactic-sugar.md)双向绑定变量。 |
+| offset | string&nbsp;\|&nbsp;number | 否 | 刷新组件静止时距离父组件顶部的距离。<br/>默认值：16，单位vp |
+| friction | number&nbsp;\|&nbsp;string | 否 | 下拉摩擦系数，取值范围为0到100。<br/>默认值：62<br/>-&nbsp;0表示下拉刷新容器不跟随手势下拉而下拉。<br/>-&nbsp;100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>-&nbsp;数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。 |
+
 
 
 ## 事件
 
 
 | 名称 | 描述 |
-| ---------------------------------------- | ------------------------------- |
-| onStateChange(callback: (state: RefreshStatus) => void) | 当前刷新状态变更时，触发回调。<br/>state：刷新状态。 |
-| onRefreshing(callback: () => void)       | 进入刷新状态时触发回调。                    |
+| -------- | -------- |
+| onStateChange(callback: (state: [RefreshStatus](#refreshstatus枚举说明)) => void)| 当前刷新状态变更时，触发回调。<br/>-&nbsp;state：刷新状态。 |
+| onRefreshing(callback: () => void)| 进入刷新状态时触发回调。 |
 
 ## RefreshStatus枚举说明
 
 | 名称 | 描述 |
-| -------- | -------------------- |
+| -------- | -------- |
 | Inactive | 默认未下拉状态。 |
 | Drag | 下拉中，下拉距离小于刷新距离。 |
 | OverDrag | 下拉中，下拉距离超过刷新距离。 |
 | Refresh | 下拉结束，回弹至刷新距离，进入刷新状态。 |
 | Done | 刷新结束，返回初始状态（顶部）。 |
 
+
 ## 示例
 
 ```ts
@@ -57,7 +55,7 @@ struct RefreshExample {
 
   build() {
     Column() {
-      Refresh({refreshing: this.isRefreshing, offset: 120, friction: 100}) {
+      Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
         Text('Pull Down and refresh: ' + this.counter)
           .fontSize(30)
           .margin(10)

zh-cn/application-dev/reference/arkui-ts/ts-container-row.md

@@ -7,11 +7,6 @@
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 子组件
 
 可以包含子组件。
@@ -19,20 +14,22 @@
 
 ## 接口
 
-Row(value?:{space?: string | number})
+Row(value?:{space?:  number | string })
 
 **参数：**
 
 | 参数名 | 参数类型 | 必填 | 参数描述 |
-| ------ | -------------------------- | ---- | ---------------------------------------- |
+| -------- | -------- | -------- | -------- |
 | space | string&nbsp;\|&nbsp;number | 否 | 横向布局元素间距。<br/>默认值：0，单位vp |
 
+
 ## 属性
 
-| 名称               | 参数类型                              | 默认值                  | 描述                |
-| ---------------- | --------------------------------- | -------------------- | ----------------- |
-| alignItems       | [VerticalAlign](ts-appendix-enums.md#verticalalign)    | VerticalAlign.Center | 在垂直方向上子组件的对齐格式。   |
-| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start      | 设置子组件在水平方向上的对齐格式。 |
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center |
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。<br/>FlexAlign.Start |
+
 
 ## 示例
 
@@ -43,24 +40,27 @@ Row(value?:{space?: string&nbsp;|&nbsp;number})
 struct RowExample {
   build() {
     Column({ space: 5 }) {
+      // 设置子组件水平方向的间距为5
       Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Row({ space: 5 }) {
         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
         Row().width('30%').height(50).backgroundColor(0x00FFFF)
       }.width('90%').height(107).border({ width: 1 })
 
-        Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      // 设置子元素垂直方向对齐方式
+      Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Row() {
         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
         Row().width('30%').height(50).backgroundColor(0x00FFFF)
-        }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 })
+      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
 
       Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Row() {
         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
         Row().width('30%').height(50).backgroundColor(0x00FFFF)
-        }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
+      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
 
+      // 设置子元素水平方向对齐方式
       Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Row() {
         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
@@ -77,4 +77,4 @@ struct RowExample {
 }
 ```
 
-![zh-cn_image_0000001174422908](figures/Row.png)
+![row](figures/row.png)

zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md

 # RowSplit
 
-将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。
-
 >  **说明：**
->
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
+将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。
 
-无
 
 
 ## 子组件
@@ -25,11 +21,13 @@ RowSplit()
 ## 属性
 
 | 名称 | 参数类型 | 描述 | 
-| ---------- | ------- | ------------------ |
+| -------- | -------- | -------- |
 | resizeable | boolean | 分割线是否可拖拽，默认为false。 | 
 
 >  **说明：**
 > RowSplit的分割线最小能拖动到刚好包含子组件。
+> 
+> 在真机中查看拖动效果，预览器中不支持拖动。
 
 
 ## 示例

zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md

 # Scroll
 
-可滑动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滑动。
+可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
 
 >  **说明：**
->
 >  - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
->  - 该组件回弹的前提是要有滑动。内容小于一屏时，没有回弹效果。
+>  - 该组件嵌套List子组件滚动时，若List不设置宽高，则默认全部加载，在对性能有要求的场景下建议指定List的宽高。
+>  - 该组件滚动的前提是主轴方向大小小于内容大小。
+>  - 该组件回弹的前提是要有滚动。内容小于一屏时，没有回弹效果。
 
 
 ## 子组件
@@ -17,37 +18,42 @@
 
 Scroll(scroller?: Scroller)
 
-
 ## 属性
 
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
 | 名称             | 参数类型                                     | 描述        |
-| -------------- | --------------------------------------------- | ------------------------------------------------------------ |
-| scrollable     | ScrollDirection                               | 设置滑动方法。<br/>默认值：ScrollDirection.Vertical          |
-| scrollBar      | [BarState](ts-appendix-enums.md#barstate)     | 设置滑动条状态。<br/>默认值：BarState.Off                    |
-| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 设置滑动条的颜色。                                           |
-| scrollBarWidth | string&nbsp;\|&nbsp;number                    | 设置滑动条的宽度。                                           |
+| -------------- | ---------------------------------------- | --------- |
+| scrollable     | [ScrollDirection](#scrolldirection枚举说明)                        | 设置滚动方向。<br/>默认值：ScrollDirection.Vertical |
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值：BarState.Off |
+| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Color](ts-appendix-enums.md#color)   | 设置滚动条的颜色。 |
+| scrollBarWidth | string&nbsp;\|&nbsp;number         | 设置滚动条的宽度。 |
 | edgeEffect     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)            | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值：EdgeEffect.None |
 
 ## ScrollDirection枚举说明
-
 | 名称       | 描述                     |
-| ---------- | ------------ |
+| ---------- | ------------------------ |
 | Horizontal | 仅支持水平方向滚动。     |
 | Vertical   | 仅支持竖直方向滚动。     |
 | None       | 不可滚动。               |
-| Free       | 支持竖直或水平方向滚动。 |
+| Free<sup>(deprecated) </sup> | 支持竖直或水平方向滚动<br/> 从API version 9开始废弃|
 
 ## 事件
 
 | 名称                                                         | 功能描述                                                     |
-| ---------------------------------------- | ----------------------------- |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | 滚动开始事件回调。<br>参数：<br>- dx：即将发生的水平方向滚动量。<br>- dy：即将发生的竖直方向滚动量。<br>返回值：<br>- dxRemain：水平方向滚动剩余量。<br>- dyRemain：竖直方向滚动剩余量。 |
 | onScroll(event: (xOffset: number, yOffset: number) => void)  | 滚动事件回调,&nbsp;返回滚动时水平、竖直方向偏移量。          |
 | onScrollEdge(event: (side: Edge) => void)                    | 滚动到边缘事件回调。                                         |
 | onScrollEnd(event: () => void)                               | 滚动停止事件回调。                                           |
 
+>  **说明：**
+>
+>  若通过onScrollBegin事件和scrollBy方法实现容器嵌套滚动，需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect.None。
+
 ## Scroller
 
-可滑动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滑动，目前支持绑定到List、Scroll、ScrollBar上。
+可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，同一个控制器不可以控制多个容器组件，目前支持绑定到List、Scroll、ScrollBar上。
 
 
 ### 导入对象
@@ -67,37 +73,53 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
 **参数：**
 
 | 参数名    | 参数类型                                                     | 必填 | 参数描述                                                     |
-| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| xOffset   | number&nbsp;\|&nbsp;string               | 是    | 水平滑动偏移。                                  |
-| yOffset   | number&nbsp;\|&nbsp;string               | 是    | 竖直滑动偏移。                                  |
-| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;<br/>} | 否    | 动画配置：<br/>-&nbsp;duration:&nbsp;滑动时长设置。<br/>-&nbsp;curve:&nbsp;滑动曲线设置。 |
+| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| xOffset   | Length                                                       | 是   | 水平滑动偏移。                                               |
+| yOffset   | Length                                                       | 是   | 竖直滑动偏移。                                               |
+| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)<br/>} | 否   | 动画配置：<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。 |
+
 
 ### scrollEdge
 
-scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void
+scrollEdge(value: Edge): void
 
 
-滑动到容器边缘。
+滚动到容器边缘。
+
+**参数：**
+
+| 参数名   | 参数类型 | 必填   | 参数描述      |
+| ----- | ---- | ---- | --------- |
+| value | [Edge](ts-appendix-enums.md#edge) | 是    | 滚动到的边缘位置。 |
+
 
 ### scrollPage
 
 scrollPage(value: { next: boolean, direction?: Axis }): void
 
-滑动到下一页或者上一页。
+滚动到下一页或者上一页。
 
 **参数：**
 
 | 参数名       | 参数类型    | 必填   | 参数描述                           |
-| --------- | --------------------------------- | ---- | ------------------------------ |
+| --------- | ------- | ---- | ------------------------------ |
 | next      | boolean | 是    | 是否向下翻页。true表示向下翻页，false表示向上翻页。 |
-| direction | [Axis](ts-appendix-enums.md#axis) | 否    | 设置滑动方向为水平或竖直方向。                |
+| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis)    | 否    | 设置滚动方向为水平或竖直方向。<br/> 从API version 9开始废弃                |
+
 
 ### currentOffset
 
 currentOffset()
 
 
-返回当前的滑动偏移量。
+返回当前的滚动偏移量。
+
+**返回值**
+
+| 类型                                       | 描述                                       |
+| ---------------------------------------- | ---------------------------------------- |
+| {<br/>xOffset:&nbsp;number,<br/>yOffset:&nbsp;number<br/>} | xOffset:&nbsp;水平滑动偏移;<br/>yOffset:&nbsp;竖直滑动偏移。 |
+
 
 ### scrollToIndex
 
@@ -108,23 +130,46 @@ scrollToIndex(value: number): void
 
 
 >  **说明：**
+>
 >  仅支持list组件。
 
 **参数：**
 
 | 参数名 | 参数类型 | 必填 | 参数描述                           |
-| ----- | ------ | ---- | ----------------- |
+| ------ | -------- | ---- | ---------------------------------- |
 | value  | number   | 是   | 要滑动到的列表项在列表中的索引值。 |
 
+
+### scrollBy<sup>9+</sup>
+
+scrollBy(dx: Length, dy: Length): void
+
+
+滑动指定距离。
+
+
+>  **说明：**
+>
+>  仅支持Scroll组件。
+
+**参数：**
+
+| 参数名   | 参数类型   | 必填   | 参数描述              |
+| ----- | ------ | ---- | ----------------- |
+| dx | Length | 是    | 水平方向滚动距离，不支持百分比形式。 |
+| dy | Length | 是    | 竖直方向滚动距离，不支持百分比形式。 |
+
+
 ## 示例
+### 示例1
 
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct ScrollExample {
-  scroller: Scroller = new Scroller()
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  scroller: Scroller = new Scroller();
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
   build() {
     Stack({ alignContent: Alignment.TopStart }) {
@@ -142,38 +187,99 @@ struct ScrollExample {
           }, item => item)
         }.width('100%')
       }
-      .scrollable(ScrollDirection.Vertical)
-      .scrollBar(BarState.On)
-      .scrollBarColor(Color.Gray)
-      .scrollBarWidth(30)
+      .scrollable(ScrollDirection.Vertical)  // 滚动方向纵向
+      .scrollBar(BarState.On)  // 滚动条常驻显示
+      .scrollBarColor(Color.Gray)  // 滚动条颜色
+      .scrollBarWidth(30) // 滚动条宽度
+      .edgeEffect(EdgeEffect.None)
       .onScroll((xOffset: number, yOffset: number) => {
-        console.info(xOffset + ' ' + yOffset)
+        console.info(xOffset + ' ' + yOffset);
       })
       .onScrollEdge((side: Edge) => {
-        console.info('To the edge')
+        console.info('To the edge');
       })
       .onScrollEnd(() => {
-        console.info('Scroll Stop')
+        console.info('Scroll Stop');
       })
 
-      Button('scroll 100')
-        .onClick(() => { // 点击后下滑100.0距离
-          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
+      Button('scroll 150')
+        .onClick(() => { // 点击后下滑指定距离150.0vp
+          this.scroller.scrollBy(0,150);
         })
         .margin({ top: 10, left: 20 })
+      Button('scroll 100')
+        .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离
+          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 });
+        })
+        .margin({ top: 60, left: 20 })
       Button('back top')
         .onClick(() => { // 点击后回到顶部
-          this.scroller.scrollEdge(Edge.Top)
+          this.scroller.scrollEdge(Edge.Top);
         })
-        .margin({ top: 60, left: 20 })
+        .margin({ top: 110, left: 20 })
       Button('next page')
-        .onClick(() => { // 点击后下滑到底部
-          this.scroller.scrollPage({ next: true })
+        .onClick(() => { // 点击后滑到下一页
+          this.scroller.scrollPage({ next: true });
         })
-        .margin({ top: 110, left: 20 })
+        .margin({ top: 170, left: 20 })
     }.width('100%').height('100%').backgroundColor(0xDCDCDC)
   }
 }
 ```
 
 ![zh-cn_image_0000001174104386](figures/zh-cn_image_0000001174104386.gif)
+
+### 示例2
+```ts
+@Entry
+@Component
+struct NestedScroll {
+  @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
+  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  private scroller: Scroller = new Scroller();
+
+  build() {
+    Flex() {
+      Scroll(this.scroller) {
+        Column() {
+          Text("Scroll Area")
+            .width("100%").height("40%").backgroundColor(0X330000FF)
+            .fontSize(16).textAlign(TextAlign.Center)
+
+          List({ space: 20 }) {
+            ForEach(this.arr, (item) => {
+              ListItem() {
+                Text("ListItem" + item)
+                  .width("100%").height("100%").borderRadius(15)
+                  .fontSize(16).textAlign(TextAlign.Center).backgroundColor(Color.White)
+              }.width("100%").height(100)
+            }, item => item)
+          }
+          .width("100%").height("50%").edgeEffect(EdgeEffect.None)
+          .onReachStart(() => {
+            this.listPosition = 0;
+          })
+          .onReachEnd(() => {
+            this.listPosition = 2;
+          })
+          .onScrollBegin((dx: number, dy: number) => {
+            if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
+              this.scroller.scrollBy(0, -dy);
+              return { dxRemain: dx, dyRemain: 0 };
+            }
+            this.listPosition = 1;
+            return { dxRemain: dx, dyRemain: dy };
+          })
+
+          Text("Scroll Area")
+            .width("100%").height("40%").backgroundColor(0X330000FF)
+            .fontSize(16).textAlign(TextAlign.Center)
+        }
+      }
+      .width("100%").height("100%")
+    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
+  }
+}
+```
+
+![NestedScroll](figures/NestedScroll.gif)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md

 # 栅格设置
 
 >  **说明：**
+>
 >  - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 >
 >  - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。
 
 
-## 权限列表
-
-无
-
-
 ## 属性
 
 
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| useSizeType | {<br/>xs?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>sm?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>md?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>lg?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;}<br/>} | - | 设置在特定设备宽度类型下的占用列数和偏移列数，span:&nbsp;占用列数;&nbsp;offset:&nbsp;偏移列数。<br/>当值为number类型时，仅设置列数，&nbsp;当格式如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0}时，指同时设置占用列数与偏移列数。<br/>-&nbsp;xs:&nbsp;指设备宽度类型为SizeType.XS时的占用列数和偏移列数。<br/>-&nbsp;sm:&nbsp;指设备宽度类型为SizeType.SM时的占用列数和偏移列数。<br/>-&nbsp;md:&nbsp;指设备宽度类型为SizeType.MD时的占用列数和偏移列数。<br/>-&nbsp;lg:&nbsp;指设备宽度类型为SizeType.LG时的占用列数和偏移列数。 |
-| gridSpan | number | 1 | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;设置了栅格span属性，组件的宽度由栅格布局决定。 |
-| gridOffset | number | 0 | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>>&nbsp;-偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>>&nbsp;-设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。 |
+| 名称        | 参数类型                                                     | 描述                                                         |
+| ----------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| useSizeType | {<br/>xs?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>sm?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>md?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>lg?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;}<br/>} | 设置在特定设备宽度类型下的占用列数和偏移列数，span:&nbsp;占用列数;&nbsp;offset:&nbsp;偏移列数。<br/>当值为number类型时，仅设置列数，&nbsp;当格式如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0}时，指同时设置占用列数与偏移列数。<br/>-&nbsp;xs:&nbsp;指设备宽度类型为SizeType.XS时的占用列数和偏移列数。<br/>-&nbsp;sm:&nbsp;指设备宽度类型为SizeType.SM时的占用列数和偏移列数。<br/>-&nbsp;md:&nbsp;指设备宽度类型为SizeType.MD时的占用列数和偏移列数。<br/>-&nbsp;lg:&nbsp;指设备宽度类型为SizeType.LG时的占用列数和偏移列数。 |
+| gridSpan    | number                                                       | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。<br/>**说明：**<br/>设置了栅格span属性，组件的宽度由栅格布局决定。<br>默认值：1 |
+| gridOffset  | number                                                       | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>**说明：**<br/>- 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>- 偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>- 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。<br>默认值：0 |
 
 
 ## 示例
@@ -28,7 +24,9 @@
 @Entry
 @Component
 struct GridContainerExample1 {
-  build(){
+  build() {
+    Column() {
+      Text('useSizeType').fontSize(15).fontColor(0xCCCCCC).width('90%')
       GridContainer() {
         Row({}) {
           Row() {
@@ -40,6 +38,7 @@ struct GridContainerExample1 {
           })
           .height("100%")
           .backgroundColor(0x66bbb2cb)
+
           Row() {
             Text('Center').fontSize(25)
           }
@@ -49,6 +48,7 @@ struct GridContainerExample1 {
           })
           .height("100%")
           .backgroundColor(0x66b6c5d1)
+
           Row() {
             Text('Right').fontSize(25)
           }
@@ -60,9 +60,40 @@ struct GridContainerExample1 {
           .backgroundColor(0x66bbb2cb)
         }
         .height(200)
+
       }
       .backgroundColor(0xf1f3f5)
       .margin({ top: 10 })
+
+      // 单独设置组件的span和offset,在sm尺寸大小的设备上使用useSizeType中sm的数据实现一样的效果
+      Text('gridSpan,gridOffset').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      GridContainer() {
+        Row() {
+          Row() {
+            Text('Left').fontSize(25)
+          }
+          .gridSpan(1)
+          .height("100%")
+          .backgroundColor(0x66bbb2cb)
+
+          Row() {
+            Text('Center').fontSize(25)
+          }
+          .gridSpan(2)
+          .gridOffset(1)
+          .height("100%")
+          .backgroundColor(0x66b6c5d1)
+
+          Row() {
+            Text('Right').fontSize(25)
+          }
+          .gridSpan(1)
+          .gridOffset(3)
+          .height("100%")
+          .backgroundColor(0x66bbb2cb)
+        }.height(200)
+      }
+    }
   }
 }
 ```
@@ -78,3 +109,7 @@ struct GridContainerExample1 {
 **图3** 设备宽度为LG
 
 ![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png)
+
+**图4** 单独设置gridSpan和gridOffset在特定屏幕大小下的效果与useSizeType效果一致
+
+![gridSpan](figures/gridSpan.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md

 # 图像效果
 
+设置组件的模糊，阴影效果以及设置图片的图像效果。
+
 >  **说明：**
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
@@ -8,65 +10,116 @@
 
 
 | 名称                          | 参数类型                                                     | 默认值 | 描述                                                         |
-| ----------------------------- | ---------------------------------------- | ------ | ---------------------------------------- |
+| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
 | blur                          | number                                                       | -      | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
 | backdropBlur                  | number                                                       | -      | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
-| shadow                        | {<br/>radius:&nbsp;number \| [Resource](ts-types.md#resource),<br/>color?:&nbsp;Color \| string \| Resource,<br/>offsetX?:&nbsp;number \| Resource,<br/>offsetY?:&nbsp;number \| Resource<br/>} | -      | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 |
+| shadow                        | {<br/>radius:&nbsp;number \| [Resource](ts-types.md#resource),<br/>color?:&nbsp;[Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),<br/>offsetX?:&nbsp;number \| [Resource](ts-types.md#resource),<br/>offsetY?:&nbsp;number \| [Resource](ts-types.md#resource)<br/>} | -      | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 |
 | grayscale                     | number                                                       | 0.0    | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比) |
 | brightness                    | number                                                       | 1.0    | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。 |
 | saturate                      | number                                                       | 1.0    | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） |
 | contrast                      | number                                                       | 1.0    | 为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比） |
 | invert                        | number                                                       | 0      | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比） |
-| colorBlend&nbsp;<sup>8+</sup> | Color                                    | -      | 为当前组件添加颜色叠加效果，入参为叠加的颜色。                  |
+| colorBlend&nbsp;<sup>8+</sup> | [Color](ts-appendix-enums.md#color)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | -      | 为当前组件添加颜色叠加效果，入参为叠加的颜色。               |
 | sepia                         | number                                                       | 0      | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。&nbsp;（百分比） |
-| hueRotate                     | number \| string                         | '0deg' | 为当前组件添加色相旋转效果，入参为旋转的角度值，0deg时图像无变化。入参没有最大值，超过360deg时相当于又绕一圈，即，370deg和10deg的色相旋转效果相同。 |
+| hueRotate                     | number&nbsp;\|&nbsp;string                                   | '0deg' | 色相旋转效果，输入参数为旋转角度。                           |
 
 ## 示例
 
-示例效果请以真机运行为准，当前IDE预览器不支持
-
+### 示例1
+模糊属性的用法，blur内容模糊，backdropBlur背景模糊。
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct ImageEffectsExample {
+struct BlurEffectsExample {
   build() {
-    Column({space: 10}) {
+    Column({ space: 10 }) {
       //       对字体进行模糊
       Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Text('text').blur(3).width('90%').height(40)
-        .fontSize(16).backgroundColor(0xF9CF93).padding({ left: 5 })
+      Flex({ alignItems: ItemAlign.Center }) {
+        Text('original text').margin(10)
+        Text('blur text')
+          .blur(1).margin(10)
+        Text('blur text')
+          .blur(2).margin(10)
+        Text('blur text')
+          .blur(3).margin(10)
+      }.width('90%').height(40)
+      .backgroundColor(0xF9CF93)
+
 
       // 对背景进行模糊
       Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Text().width('90%').height(40).fontSize(16).backdropBlur(3)
-        .backgroundImage('/comment/bg.jpg')
+      Text()
+        .width('90%')
+        .height(40)
+        .fontSize(16)
+        .backdropBlur(3)
+        .backgroundImage('/pages/attrs/image/image.jpg')
         .backgroundImageSize({ width: 1200, height: 160 })
+    }.width('100%').margin({ top: 5 })
+  }
+}
+```
+
+![textblur](figures/textblur.png)
 
+### 示例2
+设置图片的效果，包括阴影，灰度，高光，饱和度，对比度，图像反转，叠色，色相旋转等。
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ImageEffectsExample {
+  build() {
+    Column({ space: 10 }) {
+      // 添加阴影效果，图片效果不变
       Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Image($r('app.media.bg')).width('90%').height(40)
-        .shadow({ radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 })
+      Image($r('app.media.image'))
+        .width('90%')
+        .height(40)
+        .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 30 })
 
+      // 灰度效果0~1，越接近1，灰度越明显
       Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Image($r('app.media.bg')).width('90%').height(40).grayscale(0.6)
+      Image($r('app.media.image')).width('90%').height(40).grayscale(0.3)
+      Image($r('app.media.image')).width('90%').height(40).grayscale(0.8)
 
+      // 高光效果，1为正常图片，<1变暗，>1亮度增大
       Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Image($r('app.media.bg')).width('90%').height(40).brightness(2.0)
+      Image($r('app.media.image')).width('90%').height(40).brightness(1.2)
 
+      // 饱和度，原图为1
       Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Image($r('app.media.bg')).width('90%').height(40).saturate(2.0)
+      Image($r('app.media.image')).width('90%').height(40).saturate(2.0)
+      Image($r('app.media.image')).width('90%').height(40).saturate(0.7)
 
+      // 对比度，1为原图，>1值越大越清晰，<1值越小越模糊
       Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Image($r('app.media.bg')).width('90%').height(40).contrast(2.0)
+      Image($r('app.media.image')).width('90%').height(40).contrast(2.0)
+      Image($r('app.media.image')).width('90%').height(40).contrast(0.8)
 
+      // 图像反转比例
       Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Image($r('app.media.bg')).width('90%').height(40).invert(1)
+      Image($r('app.media.image')).width('90%').height(40).invert(0.2)
+      Image($r('app.media.image')).width('90%').height(40).invert(0.8)
+
+      // 叠色添加
+      Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Green)
+      Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Blue)
 
+      // 深褐色
+      Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.image')).width('90%').height(40).sepia(0.8)
+
+      // 色相旋转
       Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
-      Image($r('app.media.bg')).width('90%').height(40).hueRotate(90)
+      Image($r('app.media.image')).width('90%').height(40).hueRotate(90)
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
 
-<img src="figures/image-effect.png" alt="image-effect"  />
+![imageeffect](figures/imageeffect.png)
\ No newline at end of file
+

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md

 # 布局约束
 
+通过组件的宽高比和显示优先级约束组件显示效果。
+
 >  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 属性
 
-
-| 名称 | 参数说明 | 默认值 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| aspectRatio | number | - | 指定当前组件的宽高比。 | 
-| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex(单行)容器组件中生效。 | 
+| 名称              | 参数说明   | 描述                                       |
+| --------------- | ------ | ---------------------------------------- |
+| aspectRatio     | number | 指定当前组件的宽高比，aspectRatio = width/height。                              |
+| displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>**说明：**<br/>仅在Row/Column/Flex(单行)容器组件中生效。 |
 
 
 ## 示例
@@ -25,29 +22,32 @@
 @Entry
 @Component
 struct AspectRatioExample {
-  private children : string[] = ['1', '2', '3', '4', '5', '6']
+  private children: string[] = ['1', '2', '3', '4', '5', '6'];
 
   build() {
-    Column({space: 20}) {
+    Column({ space: 20 }) {
       Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%')
-      Row({space: 10}) {
+      Row({ space: 10 }) {
         ForEach(this.children, (item) => {
+          // 组件宽度 = 组件高度*1.5 = 90
           Text(item)
             .backgroundColor(0xbbb2cb)
             .fontSize(20)
             .aspectRatio(1.5)
             .height(60)
+          // 组件高度 = 组件宽度/1.5 = 60/1.5 = 40
           Text(item)
             .backgroundColor(0xbbb2cb)
             .fontSize(20)
             .aspectRatio(1.5)
             .width(60)
-        }, item=>item)
+        }, item => item)
       }
-      .size({width: "100%", height: 100})
+      .size({ width: "100%", height: 100 })
       .backgroundColor(0xd2cab3)
       .clip(true)
 
+      // grid子元素width/height=3/2
       Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%')
       Grid() {
         ForEach(this.children, (item) => {
@@ -57,12 +57,12 @@ struct AspectRatioExample {
               .fontSize(40)
               .aspectRatio(1.5)
           }
-        }, item=>item)
+        }, item => item)
       }
       .columnsTemplate('1fr 1fr 1fr')
       .columnsGap(10)
       .rowsGap(10)
-      .size({width: "100%", height: 165})
+      .size({ width: "100%", height: 165 })
       .backgroundColor(0xd2cab3)
     }.padding(10)
   }
@@ -75,40 +75,46 @@ struct AspectRatioExample {
 **图2** 横屏显示<br>
 ![zh-cn_image_0000001174264382](figures/zh-cn_image_0000001174264382.gif)
 
-```
+```ts
 class ContainerInfo {
-  label : string = ''
-  size : string = ''
+  label: string = '';
+  size: string = '';
 }
 
 class ChildInfo {
-  text : string = ''
-  priority : number = 0
+  text: string = '';
+  priority: number = 0;
 }
 
 @Entry
 @Component
 struct DisplayPriorityExample {
-  private container : ContainerInfo[] = [
-    {label: 'Big container', size: '90%'},
-    {label: 'Middle container', size: '50%'},
-    {label: 'Small container', size: '30%'}]
-  private children : ChildInfo[] = [
-    {text: '1\n(priority:2)', priority: 2},
-    {text: '2\n(priority:1)', priority: 1},
-    {text: '3\n(priority:3)', priority: 3},
-    {text: '4\n(priority:1)', priority: 1},
-    {text: '5\n(priority:2)', priority: 2}]
-  @State currentIndex : number = 0
+  // 显示容器大小
+  private container: ContainerInfo[] = [
+    { label: 'Big container', size: '90%' },
+    { label: 'Middle container', size: '50%' },
+    { label: 'Small container', size: '30%' }
+  ]
+  private children: ChildInfo[] = [
+    { text: '1\n(priority:2)', priority: 2 },
+    { text: '2\n(priority:1)', priority: 1 },
+    { text: '3\n(priority:3)', priority: 3 },
+    { text: '4\n(priority:1)', priority: 1 },
+    { text: '5\n(priority:2)', priority: 2 }
+  ]
+  @State currentIndex: number = 0;
 
   build() {
-    Column({space: 10}) {
+    Column({ space: 10 }) {
+      // 切换父级容器大小
       Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
-        .onClick((event: ClickEvent) => {
-          this.currentIndex = (this.currentIndex + 1) % this.container.length
+        .onClick(() => {
+          this.currentIndex = (this.currentIndex + 1) % this.container.length;
         })
-      Flex({justifyContent: FlexAlign.SpaceBetween}) {
-        ForEach(this.children, (item)=>{
+      // 通过变量设置Flex父容器宽度
+      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
+        ForEach(this.children, (item) => {
+          // 使用displayPriority给子组件绑定显示优先级
           Text(item.text)
             .width(120)
             .height(60)
@@ -116,11 +122,11 @@ struct DisplayPriorityExample {
             .textAlign(TextAlign.Center)
             .backgroundColor(0xbbb2cb)
             .displayPriority(item.priority)
-        }, item=>item.text)
+        }, item => item.text)
       }
       .width(this.container[this.currentIndex].size)
       .backgroundColor(0xd2cab3)
-    }.width("100%").margin({top:50})
+    }.width("100%").margin({ top: 50 })
   }
 }
 

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md

 # 位置设置
 
+设置组件的对齐方式、布局方向和显示位置。
+
 >  **说明：**
 >
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -9,24 +11,26 @@
 
 
 | 名称 | 参数类型 | 描述 |
-| ---------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| align      | [Alignment](ts-appendix-enums.md#alignment)                  | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。<br/>默认值：Alignment.Center |
+| -------- | -------- | -------- |
+| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，当元素的width和height大小大于元素本身内容大小时生效。<br/>默认值：Alignment.Center |
 | direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。<br/>默认值：Direction.Auto |
-| position   | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 使用绝对定位，设置元素锚点相对于父容器顶部起点的偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 |
-| markAnchor | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 1<br/>} |
-| offset     | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 1<br/>} |
+| position | [Position](ts-types.md#position8) | 绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 |
+| markAnchor | [Position](ts-types.md#position8) | 设置元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>} |
+| offset | [Position](ts-types.md#position8) | 相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>} |
+| alignRules<sup>9+</sup> | {<br/>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br/>} | 指定相对容器的对齐规则。<br/>-&nbsp;left：设置左对齐参数。<br/>-&nbsp;right：设置右对齐参数。<br/>-&nbsp;middle：设置中间对齐的参数。<br/>-&nbsp;top：设置顶部对齐的参数。<br/>-&nbsp;bottom：设置底部对齐的参数。<br/>-&nbsp;center：设置中心对齐的参数。<br/>**说明：**<br/>-&nbsp;anchor：设置作为锚点的组件的id值。<br>-&nbsp;align：设置相对于锚点组件的对齐方式。 |
 
 
 ## 示例
-
+### 示例1
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct PositionExample {
+struct PositionExample1 {
   build() {
     Column() {
-      Column({space: 10}) {
+      Column({ space: 10 }) {
+        // 元素内容<元素宽高，设置内容在与元素内的对齐方式
         Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Text('top start')
           .align(Alignment.TopStart)
@@ -35,6 +39,14 @@ struct PositionExample {
           .fontSize(16)
           .backgroundColor(0xFFE4C4)
 
+        Text('Bottom end')
+          .align(Alignment.BottomEnd)
+          .height(50)
+          .width('90%')
+          .fontSize(16)
+          .backgroundColor(0xFFE4C4)
+
+        // 父容器设置direction为Direction.Auto|Ltr|不设置，子元素从左到右排列
         Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Row() {
           Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
@@ -43,6 +55,15 @@ struct PositionExample {
           Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
         }
         .width('90%')
+        .direction(Direction.Auto)
+        // 父容器设置direction为Direction.Rtl，子元素从右到左排列
+        Row() {
+          Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
+          Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
+          Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
+          Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
+        }
+        .width('90%')
         .direction(Direction.Rtl)
       }
     }
@@ -51,8 +72,9 @@ struct PositionExample {
 }
 ```
 
-![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif)
+![align.png](figures/align.png)
 
+### 示例2
 ```ts
 // xxx.ets
 @Entry
@@ -60,44 +82,65 @@ struct PositionExample {
 struct PositionExample2 {
   build() {
     Column({ space: 20 }) {
+      // 设置子组件左上角相对于父组件左上角的偏移位置
       Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%')
-      Row({ space: 20 }) {
-        Text('1').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }) .fontSize(16)
-        Text('2 position(25, 15)')
-          .size({ width: '60%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 })
-          .fontSize(16).align(Alignment.Start)
-          .position({ x: 25, y: 15 })
+      Row() {
+        Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+        Text('2 position(30, 10)')
+          .size({ width: '60%', height: '30' })
+          .backgroundColor(0xbbb2cb)
+          .border({ width: 1 })
+          .fontSize(16)
+          .align(Alignment.Start)
+          .position({ x: 30, y: 10 })
         Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
         Text('4 position(50%, 70%)')
-          .size({ width: '50%', height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
+          .size({ width: '50%', height: '50' })
+          .backgroundColor(0xbbb2cb)
+          .border({ width: 1 })
+          .fontSize(16)
           .position({ x: '50%', y: '70%' })
       }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
 
+      // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。
+      // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下
       Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%')
       Stack({ alignContent: Alignment.TopStart }) {
         Row()
           .size({ width: '100', height: '100' })
           .backgroundColor(0xdeb887)
-        Image($r('app.media.ic_health_heart'))
+        Text('text')
           .size({ width: 25, height: 25 })
+          .backgroundColor(Color.Green)
           .markAnchor({ x: 25, y: 25 })
-        Image($r('app.media.ic_health_heart'))
+        Text('text')
           .size({ width: 25, height: 25 })
-          .markAnchor({ x: 25, y: 25 })
-          .position({ x: '100%', y: '100%' })
+          .backgroundColor(Color.Green)
+          .markAnchor({ x: -100, y: -25 })
+        Text('text')
+          .size({ width: 25, height: 25 })
+          .backgroundColor(Color.Green)
+          .markAnchor({ x: 25, y: -25 })
       }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed })
 
+      // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上
       Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%')
       Row() {
         Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
-        Text('2\noffset(15, 15)')
-          .size({ width: 120, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 })
-          .fontSize(16).align(Alignment.Start)
-          .offset({ x: 15, y: 15 })
+        Text('2  offset(15, 30)')
+          .size({ width: 120, height: '50' })
+          .backgroundColor(0xbbb2cb)
+          .border({ width: 1 })
+          .fontSize(16)
+          .align(Alignment.Start)
+          .offset({ x: 15, y: 30 })
         Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
-        Text('4\noffset(-10%, 20%)')
-          .size({ width: 150, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
-          .offset({ x: '-10%', y: '20%' })
+        Text('4 offset(-10%, 20%)')
+          .size({ width: 100, height: '50' })
+          .backgroundColor(0xbbb2cb)
+          .border({ width: 1 })
+          .fontSize(16)
+          .offset({ x: '-5%', y: '20%' })
       }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
     }
     .width('100%').margin({ top: 25 })
@@ -105,4 +148,4 @@ struct PositionExample2 {
 }
 ```
 
-![zh-cn_image_0000001174104392](figures/zh-cn_image_0000001174104392.gif)
+![position.png](figures/position.png)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md

 # Menu控制
 
+为组件绑定弹出式菜单，弹出式菜单以垂直列表形式显示菜单项，可通过长按、点击或鼠标右键触发。
+
 >  **说明：**
 >
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -10,13 +12,13 @@
 
 | 名称                           | 参数类型                                                        | 描述                                                         |
 | ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| bindMenu                     | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8) | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
-| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
+| bindMenu                     | Array<[MenuItem](#menuitem)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8) | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
+| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
 
 ## MenuItem
 
 | 名称     | 类型                      | 描述          |
-| ------ | ----------------------- | ---------------------- |
+| ------ | ----------------------- | ----------- |
 | value  | string                  | 菜单项文本。      |
 | action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
 
@@ -30,7 +32,6 @@
 @Entry
 @Component
 struct MenuExample {
-  
   build() {
     Column() {
       Text('click for Menu')
@@ -61,7 +62,7 @@ struct MenuExample {
 
 ```ts
 // xxx.ets
-import router from '@system.router'
+import router from '@system.router';
 
 @Entry
 @Component

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md

@@ -11,8 +11,8 @@
 
 
 | 名称      | 参数类型                                     | 描述                                       |
-| ------- | ---------------------------------------------------- | ------------------------------------------------------------ |
-| opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。<br/>**说明：**<br/>子组件可以继承父组件的此属性。<br/>默认值：1 |
+| ------- | ---------------------------------------- | ---------------------------------------- |
+| opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。<br>**说明：**<br/>子组件可以继承父组件的此属性。默认值：1 |
 
 
 ## 示例
@@ -30,6 +30,10 @@ struct OpacityExample {
       Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
       Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
       Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
+      Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
+      Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
     }
     .width('100%')
     .padding({ top: 5 })
@@ -37,4 +41,4 @@ struct OpacityExample {
 }
 ```
 
-![zh-cn_image_0000001219662647](figures/zh-cn_image_0000001219662647.gif)
+![opacity.png](figures/opacity.png)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md

 # 浮层
 
+设置组件的遮罩文本。
+
 >  **说明：**
 >
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-
-## 权限列表
-
-无
-
-
 ## 属性
 
-
 | 名称 | 参数类型 | 默认值 | 描述 |
-| ------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------ |
-| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上，增加遮罩文本，布局与当前组件相同。 |
-
+| -------- | -------- | -------- | -------- |
+| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上，增加遮罩文本。<br/> value: 遮罩文本内容。<br/>options: 文本定位，align设置文本相对于组件的方位，[offset](ts-universal-attributes-location.md)为文本基于自身左上角的偏移量。文本默认处于组件左上角。<br>两者都设置时效果重叠，文本相对于组件方位定位后再基于当前位置文本的左上角进行偏移。 |
 
 ## 示例
 
@@ -33,7 +27,10 @@ struct OverlayExample {
         Column() {
           Image($r('app.media.img'))
             .width(240).height(240)
-            .overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } })
+            .overlay("Winter is a beautiful season, especially when it snows.", {
+              align: Alignment.Bottom,
+              offset: { x: 70, y: 100 }
+            })
         }.border({ color: Color.Black, width: 2 })
       }.width('100%')
     }.padding({ top: 20 })

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md

 # Popup控制
 
+给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。
+
 >  **说明：**
 >
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -9,108 +11,109 @@
 
 
 | 名称           | 参数类型                             | 描述                                        |
-| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions\|&nbsp;CustomPopupOptions<sup>8+</sup> | 给组件绑定Popup，点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示，默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
+| ---------- | ------------------------------------- | --------------------------------------- |
+| bindPopup  | show:&nbsp;boolean,<br/>popup:&nbsp;[PopupOptions](#popupoptions类型说明)&nbsp;\|&nbsp;[CustomPopupOptions](#custompopupoptions8类型说明)<sup>8+</sup> | 给组件绑定Popup弹窗，设置参数show为true弹出弹框。<br/>show:&nbsp;弹窗显示状态，默认值为false，隐藏弹窗。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
 
 ## PopupOptions类型说明
 
 | 名称                      | 类型                                                | 必填    | 描述                                          |
-| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
 | message                  | string                                          | 是    | 弹窗信息内容。                                     |
 | placementOnTop           | boolean                                         | 否    | 是否在组件上方显示，默认值为false。                  |
+| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length)                    | 否    | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。      |
 | primaryButton            | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否    | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
 | secondaryButton          | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否    | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
-| onStateChange   | (event:{isVisible:&nbsp;boolean })&nbsp;=&gt;&nbsp;void      | 否   | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。    |
+| onStateChange            | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否    | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。      |
 
 ## CustomPopupOptions<sup>8+</sup>类型说明
 
 | 名称                       | 类型                       | 必填     | 描述                                                 |
-| ------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
+| -------------------------| ------------------------- | ---- | ---------------------------------------------------- |
 | builder                  | [CustomBuilder](ts-types.md#custombuilder8)  | 是   | 提示气泡内容的构造器。                                          |
 | placement                | [Placement](ts-appendix-enums.md#placement8) | 否   | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>默认值：Placement.Bottom     |
+| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length)                 | 否   | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。          |
 | maskColor                | [ResourceColor](ts-types.md#resourcecolor)  | 否   | 提示气泡遮障层的颜色。                                          |
 | popupColor               | [ResourceColor](ts-types.md#resourcecolor)  | 否   | 提示气泡的颜色。                                               |
-| enableArrow   | boolean                                                 | 否   | 是否显示箭头，只有上、下方向的气泡会显示箭头。<br/>默认值：true |
-| autoCancel    | boolean                                                 | 否   | 页面有操作时，是否自动关闭气泡<br/>默认值：true              |
-| onStateChange | (event:{isVisible:&nbsp;boolean })&nbsp;=&gt;&nbsp;void | 否   | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。             |
+| enableArrow              | boolean                                      | 否   | 是否显示箭头。<br/>从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。<br/>默认值：true |
+| autoCancel               | boolean                                      | 否   | 页面有操作时，是否自动关闭气泡。<br/>默认值：true                        |
+| onStateChange            | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否    | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 |
 
 
 ## 示例
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct PopupExample {
-  @State noHandlePopup: boolean = false
-  @State handlePopup: boolean = false
-  @State customPopup: boolean = false
+  @State handlePopup: boolean = false;
+  @State customPopup: boolean = false;
 
+  // popup构造器定义弹框内容
   @Builder popupBuilder() {
     Row({ space: 2 }) {
-      Image('/resource/ic_public_thumbsup.svg').width(24).height(24).margin({ left: -5 })
+      Image($r("app.media.image")).width(24).height(24).margin({ left: -5 })
       Text('Custom Popup').fontSize(10)
-    }.width(100).height(50).backgroundColor(Color.White)
+    }.width(100).height(50).padding(5)
   }
 
   build() {
     Flex({ direction: FlexDirection.Column }) {
-      Button('no handle popup')
+      // PopupOptions 类型设置弹框内容
+      Button('PopupOptions')
         .onClick(() => {
-          this.noHandlePopup = !this.noHandlePopup
-        })
-        .bindPopup(this.noHandlePopup, {
-          message: 'content1 content1',
-          placementOnTop: false,
-          onStateChange: (e) => {
-            console.info(e.isVisible.toString())
-            if (!e.isVisible) {
-              this.noHandlePopup = false
-            }
-          }
-        })
-        .position({ x: 100, y: 50 })
-
-      Button('with handle popup')
-        .onClick(() => {
-          this.handlePopup = !this.handlePopup
+          this.handlePopup = !this.handlePopup //点击展示弹框
         })
         .bindPopup(this.handlePopup, {
-          message: 'content2 content2',
-          placementOnTop: true,
+          message: 'This is a popup with PopupOptions',
+          placementOnTop: false,
+          // 第一个按钮
           primaryButton: {
-            value: 'ok',
+            value: 'confirm',
             action: () => {
               this.handlePopup = !this.handlePopup
-              console.info('secondaryButton click')
+              console.info('ok Button click')
+            }
+          },
+          // 第二个按钮
+          secondaryButton: {
+            value: 'cancle',
+            action: () => {
+              this.handlePopup = !this.handlePopup
+              console.info('cancle Button click')
             }
           },
           onStateChange: (e) => {
             console.info(e.isVisible.toString())
+            if (!e.isVisible) {
+              this.handlePopup = false
+            }
           }
         })
-        .position({ x: 100, y: 200 })
+        .position({ x: 100, y: 50 })
+
 
-      Button('custom popup')
+      // CustomPopupOptions 类型设置弹框内容
+      Button('CustomPopupOptions')
         .onClick(() => {
           this.customPopup = !this.customPopup
         })
         .bindPopup(this.customPopup, {
           builder: this.popupBuilder,
-          placement: Placement.Bottom,
+          placement: Placement.Top,
           maskColor: 0x33000000,
-          popupColor: Color.White,
+          popupColor: Color.Yellow,
           enableArrow: true,
+          autoCancel: true,
           onStateChange: (e) => {
             if (!e.isVisible) {
               this.customPopup = false
             }
           }
         })
-        .position({ x: 100, y: 350 })
+        .position({ x: 80, y: 200 })
     }.width('100%').padding({ top: 5 })
   }
 }
 ```
 
-![zh-cn_image_0000001187055946](figures/zh-cn_image_0000001187055946.gif)
+![figures/popup.gif](figures/popup.gif)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md

 # 尺寸设置
 
+用于设置组件的宽高、边距。
+
 >  **说明：**
 >
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -9,14 +11,14 @@
 
 
 | 名称             | 参数说明                                     | 描述                                       |
-| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| width          | [Length](ts-types.md#length)                                 | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。       |
-| height         | [Length](ts-types.md#length)                                 | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。       |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
+| width          | [Length](ts-types.md#length)             | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。              |
+| height         | [Length](ts-types.md#length)             | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。              |
 | size           | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置高宽尺寸。                                  |
-| padding        | [Padding](ts-types.md#padding)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。<br/>默认值：0 |
-| margin         | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。<br/>默认值：0 |
-| constraintSize | {<br/>minWidth?:&nbsp;[Length](ts-types.md#length),<br/>maxWidth?:&nbsp;[Length](ts-types.md#length),<br/>minHeight?:&nbsp;[Length](ts-types.md#length),<br/>maxHeight?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。<br/>默认值：<br/>{<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} |
-| layoutWeight   | number&nbsp;\|&nbsp;string                                   | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。<br/>默认值：0<br/>**说明：**<br/>仅在Row/Column/Flex布局中生效。 |
+| padding        | [Padding](ts-types.md#padding)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。<br>默认值：0 <br>padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 |
+| margin         | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length)  | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。<br>默认值：0 <br>margin设置百分比时，上下左右外边距均以父容器的width作为基础值。|
+| constraintSize | {<br/>minWidth?:&nbsp;[Length](ts-types.md#length),<br/>maxWidth?:&nbsp;[Length](ts-types.md#length),<br/>minHeight?:&nbsp;[Length](ts-types.md#length),<br/>maxHeight?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。<br>默认值：<br>{<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} |
+| layoutWeight   | number&nbsp;\|&nbsp;string               | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。<br>**说明：**<br/>仅在Row/Column/Flex布局中生效。|
 
 
 ## 示例
@@ -29,30 +31,41 @@ struct SizeExample {
   build() {
     Column({ space: 10 }) {
       Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%')
-      // 宽度80 ,高度80 ,内外边距20
       Row() {
+        // 宽度80 ,高度80 ,外边距20(蓝色区域），内边距10（白色区域）
         Row() {
-          Row().size({ width: '100%', height: '100%' }).backgroundColor(0xAFEEEE)
-        }.width(80).height(80).padding(20).margin(20).backgroundColor(0xFDF5E6)
-      }.backgroundColor(0xFFA500)
+          Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
+        }
+        .width(80)
+        .height(80)
+        .padding(10)
+        .margin(20)
+        .backgroundColor(Color.White)
+      }.backgroundColor(Color.Blue)
+
+      Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%')
+      Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text')
+        .width('90%')
+        .constraintSize({ maxWidth: 200 })
 
       Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%')
-      // 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
+      // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
       Row() {
-        // 权重1
+        // 权重1，占主轴剩余空间1/3
         Text('layoutWeight(1)')
           .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
           .layoutWeight(1)
-        // 权重0
+        // 权重2，占主轴剩余空间2/3
         Text('layoutWeight(2)')
           .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
           .layoutWeight(2)
-        // 权重默认0
+        // 未设置layoutWeight属性，组件按照自身尺寸渲染
         Text('no layoutWeight')
           .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
       }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE)
     }.width('100%').margin({ top: 5 })
-  }}
+  }
+}
 ```
 
-![zh-cn_image_0000001174264384](figures/zh-cn_image_0000001174264384.gif)
+![size](figures/size.png)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md

 # 文本样式设置
 
+针对包含文本元素的组件，设置文本样式。
+
 >  **说明：**
 >
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-针对包含文本元素的组件，设置文本样式。
-
-
-## 权限列表
-
-无
-
 
 ## 属性
 
 
-| 名称         | 参数类型                     | 默认值                         | 描述                                       |
-| ---------- | ------------------------ | --------------------------- | ---------------------------------------- |
-| fontColor  | Color                    | -                           | 设置文本颜色。                                  |
-| fontSize   | Length                   | -                           | 设置文本尺寸，Length为number类型时，使用fp单位。          |
-| fontStyle  | [FontStyle](ts-appendix-enums.md#fontstyle)     | FontStyle.Normal            | 设置文本的字体样式。                               |
-| fontWeight | number&nbsp;\|[FontWeight](ts-appendix-enums.md#fontweight) | FontWeight.FontWeightNormal | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>提供常用枚举值，参考：FontWeight枚举说明。 |
-| fontFamily | string                   | -                           | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。 |
+| 名称         | 参数类型                                      | 描述                                    |
+| -----------| ---------------------------------------- | ------------------------------------ |
+| fontColor  | [ResourceColor](ts-types.md#resourcecolor)  | 设置字体颜色。                                 |
+| fontSize   | Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource)  | 设置字体大小，Length为number类型时，使用fp单位。字体默认大小10。     |
+| fontStyle  | [FontStyle](ts-appendix-enums.md#fontstyle)  | 设置字体样式。<br>默认值：FontStyle.Normal         |
+| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string  | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。<br/>默认值：FontWeight.Normal  |
+| fontFamily | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)  | 设置字体列表。默认字体'HarmonyOS Sans'，且当前只支持这种字体。|
 
 
 ## 示例
@@ -35,40 +30,38 @@ struct TextStyleExample {
   build() {
     Column({ space: 5 }) {
       Text('default text')
+      Divider()
       
-      Text('text font color red')
-        .fontColor(Color.Red)
+      Text('text font color red').fontColor(Color.Red)
+      Divider()
       
-      Text('text font size 20')
-        .fontSize(20)
-
-      Text('text font style Italic')
-        .fontStyle(FontStyle.Italic)
+      Text('text font default')
+      Text('text font size 10').fontSize(10)
+      Text('text font size 10fp').fontSize('10fp')
+      Text('text font size 20').fontSize(20)
+      Divider()
       
-      Text('text fontWeight bold')
-        .fontWeight(700)
+      Text('text font style Italic').fontStyle(FontStyle.Italic)
+      Divider()
       
-      Text('text fontFamily sans-serif')
-        .fontFamily('sans-serif')
+      Text('text fontWeight bold').fontWeight(700)
+      Text('text fontWeight lighter').fontWeight(FontWeight.Lighter)
+      Divider()
       
-      Text('red 20 Italic bold cursive text')
+      Text('red 20 Italic bold text')
         .fontColor(Color.Red)
         .fontSize(20)
         .fontStyle(FontStyle.Italic)
-        .fontWeight(700)
-        .fontFamily('cursive')
-        .textAlign(TextAlign.Center)
-        .width('90%')
+        .fontWeight(FontWeight.Bold)
+      Divider()
       
-      Text('Orange 18 Normal source-sans-pro text')
+      Text('Orange 18 Normal text')
         .fontColor(Color.Orange)
         .fontSize(18)
         .fontStyle(FontStyle.Normal)
-        .fontWeight(400)
-        .fontFamily('source-sans-pro,cursive,sans-serif')
     }.width('100%')
   }
 }
 ```
 
-![zh-cn_image_0000001219662673](figures/zh-cn_image_0000001219662673.png)
+![textstyle](figures/textstyle.png)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md

@@ -2,6 +2,7 @@
 
 适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。
 
+
 >  **说明：**
 >
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -11,17 +12,17 @@
 
 
 | 名称             | 参数类型                                          | 描述                                      |
-| -------------- | --------------------------------------------- | ------------------------------------------------------------ |
-| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | 设置一个或多个触摸热区，包括位置和大小。<br/>默认值：<br/>{<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} |
+| -------------- | --------------------------------------------- | ----------------------------------------- |
+| responseRegion | Array&lt;[Rectangle](#rectangle对象说明)&gt;&nbsp;\|&nbsp;[Rectangle](#rectangle对象说明) | 设置一个或多个触摸热区，包括位置和大小。<br/>默认触摸热区为整个组件，默认值：<br/>{<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} |
 
 
-### Rectangle对象说明
-| 名称   | 类型                         | 必填 | 默认值 | 描述                                                |
-| ------ | ---------------------------- | ---- | ------ | --------------------------------------------------- |
-| x      | [Length](ts-types.md#length) | 否   | 0vp    | 触摸点相对于组件本身左边沿的X坐标。<br/>默认值：0vp |
-| y      | [Length](ts-types.md#length) | 否   | 0vp    | 触摸点相对于组件本身左边沿的Y坐标。<br/>默认值：0vp |
-| width  | [Length](ts-types.md#length) | 否   | 100%   | 触摸热区范围的宽度。<br/>默认值：100%               |
-| height | [Length](ts-types.md#length) | 否   | 100%   | 触摸热区范围的高度。<br/>默认值：100%               |
+## Rectangle对象说明
+| 名称        | 类型                       | 必填   | 描述                             |
+| ------ | ----------------------------- | -----| -------------------------------- |
+| x      | [Length](ts-types.md#length)  | 否   | 触摸点相对于组件左上角的x轴坐标。<br/>默认值：0vp |
+| y      | [Length](ts-types.md#length)  | 否   | 触摸点相对于组件左上角的y轴坐标。<br/>默认值：0vp |
+| width  | [Length](ts-types.md#length)  | 否   | 触摸热区的宽度。<br/>默认值：'100%' |
+| height | [Length](ts-types.md#length) | 否   | 触摸热区的高度。<br/>默认值：'100%' |
 
   >  **说明：**
   >
@@ -29,7 +30,7 @@
   >
   >  width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。
   >
-  >  百分比是相对于组件本身来度量的。
+  >  百分比相对于组件自身宽高进行计算。
 
 
 ## 示例
@@ -38,19 +39,38 @@
 // xxx.ets
 @Entry
 @Component
-struct ResponseRegionExample {
+struct TouchTargetExample {
+  @State text: string = "";
+
   build() {
-    Column() {
-        Toggle({ type: ToggleType.Checkbox, isOn: true })
-          .selectedColor(0x39a2db)
-          .backgroundColor(0xAFEEEE)
-          .responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 })
-          .onChange((isOn: boolean) => {
-            console.info('Component status:' + isOn)
+    Column({ space: 20 }) {
+      Text("{x:0,y:0,width:'50%',height:'100%'}")
+      // 热区宽度为按钮的一半，点击右侧无响应
+      Button("button1")
+        .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
+        .onClick(() => {
+          this.text = 'button1 clicked';
+        })
+
+      // 热区宽度为按钮的一半，且右移一个按钮宽度，点击button2右侧左边，点击事件生效
+      Text("{x:'100%',y:0,width:'50%',height:'100%'}")
+      Button("button2")
+        .responseRegion({ x: '100%', y: 0, width: '50%', height: '100%' })
+        .onClick(() => {
+          this.text = 'button2 clicked';
+        })
+      // 热区大小为整个按钮，且下移一个按钮高度，点击button3下方按钮大小区域，点击事件生效
+      Text("{x:0,y:'100%',width:'100%',height:'100%'}")
+      Button("button3")
+        .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' })
+        .onClick(() => {
+          this.text = 'button3 clicked';
         })
-    }.width('100%').margin({ top: 5 })
+
+      Text(this.text).margin({ top: 50 })
+    }.width('100%').margin({ top: 10 })
   }
 }
 ```
 
-![zh-cn_image_0000001184400598](figures/zh-cn_image_0000001184400598.gif)
+![touchtarget.gif](figures/touchtarget.gif)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md

 # 显隐控制
 
+控制组件是否可见。
+
 >  **说明：**
 >
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-
-## 权限列表
-
-无
-
-
 ## 属性
 
-
-| 名称         | 参数类型       | 默认值                | 描述           |
-| ---------- | ---------- | ------------------ | ------------ |
-| visibility | [Visibility](ts-appendix-enums.md#visibility) | Visibility.Visible | 控制当前组件显示或隐藏。 |
+| 名称         | 参数类型                        | 描述                                         |
+| ---------- | ---------------------------- | ------------------------------------------ |
+| visibility | [Visibility](ts-appendix-enums.md#visibility) | 控制当前组件显示或隐藏。注意，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用[条件渲染](../../ui/ts-rending-control-syntax-if-else.md)代替。<br>默认值：Visibility.Visible|
 
 
 ## 示例
@@ -28,20 +23,21 @@ struct VisibilityExample {
   build() {
     Column() {
       Column() {
-        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
-        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
-
-        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
         // 隐藏不参与占位
+        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
         Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
 
-        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
         // 隐藏参与占位
+        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
         Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
+
+        // 正常显示，组件默认的显示模式
+        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
+        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
       }.width('90%').border({ width: 1 })
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
 
-![zh-cn_image_0000001174104390](figures/zh-cn_image_0000001174104390.gif)
+![visibility.png](figures/visibility.png)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md

 # Z序控制
 
+组件的Z序，设置组件的堆叠顺序。
+
 >  **说明：**
 >
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 属性
 
 
-| 名称     | 参数类型   | 默认值  | 描述                           |
-| ------ | ------ | ---- | ---------------------------- |
-| zIndex | number | 0    | 同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。 |
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| zIndex | number | 同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。 |
 
 
 ## 示例
@@ -28,20 +25,25 @@ struct ZIndexExample {
   build() {
     Column() {
       Stack() {
-        // stack会重叠组件, 默认后定义的在最上面
-        Text('first child, zIndex(2)')
-          .size({width: '40%', height: '30%'}).backgroundColor(0xbbb2cb)
+        // stack会重叠组件, 默认后定义的在最上面，具有较高zIndex值的元素在zIndex较小的元素前面
+        Text('1, zIndex(2)')
+          .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb)
           .zIndex(2)
-        // 默认值0
-        Text('second child, default zIndex(0)')
-          .size({width: '90%', height: '80%'}).backgroundColor(0xd2cab3).align(Alignment.TopStart)
-        Text('third child, zIndex(1)')
-          .size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart)
+        Text('2, default zIndex(1)')
+          .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart)
           .zIndex(1)
+        Text('3, zIndex(0)')
+          .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart)
       }.width('100%').height(200)
     }.width('100%').height(200)
   }
 }
 ```
+Stack容器内子组件不设置zIndex的效果
+
+![nozindex.png](figures/nozindex.png)
+
+Stack容器子组件设置zIndex后效果
+
+![zindex.png](figures/zindex.png)
 
-![zh-cn_image_0000001174582860](figures/zh-cn_image_0000001174582860.png)

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

 # 组件区域变化事件
 
+组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。
+
 >  **说明：**
 >
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 事件
 
 | 名称                                       | 支持冒泡 | 功能描述                                     |
 | ---------------------------------------- | ---- | ---------------------------------------- |
-| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否    | 组件区域变化时触发该回调，Area类型描述见[Area](../../ui/ts-types.md#area8)。 |
+| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | 否    | 组件区域变化时触发该回调。 |
 
 
 ## 示例
@@ -25,7 +22,7 @@
 @Component
 struct AreaExample {
   @State value: string = 'Text'
-  @State size1: string = ''
+  @State sizeValue: string = ''
 
   build() {
     Column() {
@@ -36,9 +33,9 @@ struct AreaExample {
         })
         .onAreaChange((oldValue: Area, newValue: Area) => {
           console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
-          this.size1 = JSON.stringify(newValue)
+          this.sizeValue = JSON.stringify(newValue)
         })
-      Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
+      Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
     }
     .width('100%').height('100%').margin({ top: 30 })
   }

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md

 # 按键事件
 
-按键事件指组件与键盘、遥控器等按键设备交互时触发的事件。
+按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可交互组件（默认可获焦），例如Button。对于Text，Image等不可获焦组件，可以设置focusable属性为true后使用按键事件。
 
 >  **说明：**
 >
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
 
 ## 事件
 
@@ -21,16 +17,16 @@
 
 ## KeyEvent对象说明
 
-  | 名称                                  | 类型                          | 描述                         |
-  | ------------------------------------- | --------------------------- | -------------------------- |
-  | type                                  | [KeyType](ts-appendix-enums.md#keytype)     | 按键的类型。                     |
-  | keyCode | number                      | 按键的键码。                     |
-  | keyText                               | string                      | 按键的键值。                     |
-  | keySource                             | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。             |
-  | deviceId                              | number                      | 触发当前按键的输入设备ID。             |
-  | metaKey                               | number                      | 按键发生时元键的状态，1表示按压态，0表示未按压态。 |
-  | timestamp                             | number                      | 按键发生时的时间戳。                 |
-  | stopPropagation                       | () => void                  | 阻塞事件冒泡传递。 |
+| 名称                                    | 类型                                       | 描述                         |
+| ------------------------------------- | ---------------------------------------- | -------------------------- |
+| type                                  | [KeyType](ts-appendix-enums.md#keytype)  | 按键的类型。                     |
+| [keyCode](../apis/js-apis-keycode.md) | number                                   | 按键的键码。                     |
+| keyText                               | string                                   | 按键的键值。                     |
+| keySource                             | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。             |
+| deviceId                              | number                                   | 触发当前按键的输入设备ID。             |
+| metaKey                               | number                                   | 按键发生时元键的状态，1表示按压态，0表示未按压态。 |
+| timestamp                             | number                                   | 按键发生时的时间戳。                 |
+| stopPropagation                       | () => void                               | 阻塞事件冒泡传递。                  |
 
 
 ## 示例

zh-cn/application-dev/ui/ts-framework-file-access-rules.md

-# 应用代码文件访问规则
+# 文件访问规则
+应用代码中文件访问方法主要有下面两种：
 
-应用代码文件可通过如下方式访问：
+- **相对路径**：使用相对路径引用代码文件，以"../"访问上一级目录，以"./"访问当前目录，也可以省略不写。
 
+- **绝对路径**：使用当前模块根路径引用代码文件，比如：common/utils/utils。
 
-- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils，当前目录：./common/utils/utils。
 
-- 使用当前模块根路径引用代码文件，比如：common/utils/utils。
-
-- 公共代码文件推荐放在**common**目录下。
 
 
 ## 示例
-
 ```
 import { FoodData, FoodList } from "../common/utils/utils";
 
@@ -31,11 +28,10 @@ struct FoodCategoryList {
 }
 ```
 
-导入文件示例：
+被导入文件utils.ets：
 
-```
+```ts
 //common/utils/utils.ets
-
 export class FoodData {  
   name: string;  
   constructor(name: string) {