!10367 挑单 10065 示例文档整改

Merge pull request !10367 from matchZhou/OpenHarmony-3.1-Release

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

 # 背景设置
 
-设置组件的背景色。
+设置组件的背景样式。
 
 >  **说明：**
 >
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-
 ## 属性
 
-
 | 名称 | 参数类型 | 描述 |
 | -------- | -------- | -------- |
 | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件的背景色。 |
 | backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat：设置背景图片的重复样式，默认不重复。 |
 | backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>默认值：ImageSize.Auto |
-| backgroundImagePosition | {<br/>x?:&nbsp;[Length](ts-types.md#length),<br/>y?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
-
+| backgroundImagePosition | [Position](ts-types.md#position8)&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>默认值：<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
 
 ## 示例
 
@@ -25,6 +22,7 @@
 @Entry
 @Component
 struct BackgroundExample {
+
   build() {
     Column({ space: 5 }) {
       Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)

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

@@ -4,19 +4,14 @@ id为组件的唯一标识，在整个应用内唯一。本模块提供组件标
 
 >  **说明：**
 >
->  - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 权限列表
-
-无
+> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 属性
 
-| 名称 | 参数说明 | 默认值 | 描述                                 |
-| ---- | -------- | ------ | ------------------------------------ |
-| id   | string   | ''     | 组件的唯一标识，唯一性由使用者保证。 |
+| 名称   | 参数说明     | 描述                         |
+| -----| -------- | ----------------------------- |
+| id   | string   | 组件的唯一标识，唯一性由使用者保证。<br>默认值：'' |
 
 
 ## 接口
@@ -29,15 +24,17 @@ getInspectorByKey(id: string): string
 获取指定id的组件的所有属性，不包括子组件信息。
 此接口为系统接口。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述          |
-  | ---- | ------ | ---- | ---- | ----------- |
-  | id   | string | 是    | -    | 要获取属性的组件id。 |
+**参数:**
+
+| 参数   | 类型      | 必填     | 描述        |
+| ---- | -------- | ---- | -------------|
+| id   | string   | 是    | 要获取属性的组件id。 |
 
-- 返回值
-  | 类型     | 描述              |
-  | ------ | --------------- |
-  | string | 组件属性列表的JSON字符串。 |
+**返回值:**
+
+| 类型        | 描述             |
+| -------| -------------- |
+| string | 组件属性列表的JSON字符串。 |
 
 ### getInspectorTree
 
@@ -46,11 +43,11 @@ getInspectorTree(): string
 获取组件树及组件属性。
 此接口为系统接口。
 
-- 返回值
+**返回值:**
 
-  | 类型     | 描述                  |
-  | ------ | ------------------- |
-  | string | 组件树及组件属性列表的JSON字符串。 |
+| 类型     | 描述                            |
+| ------ | --------------------------- |
+| string | 组件树及组件属性列表的JSON字符串。 |
 
 ### sendEventByKey
 
@@ -59,17 +56,19 @@ sendEventByKey(id: string, action: number, params: string): boolean
 给指定id的组件发送事件。
 此接口为系统接口。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 描述                                       |
-  | ------ | ------ | ---- | ---- | ---------------------------------------- |
-  | id     | string | 是    | -    | 要触发事件的组件的id。                             |
-  | action | number | 是    | -    | 要触发的事件类型，目前支持取值：<br/>-&nbsp;点击事件Click:&nbsp;10<br/>-&nbsp;长按事件LongClick:&nbsp;11。 |
-  | params | string | 是    | -    | 事件参数，无参数传空字符串&nbsp;""。                   |
+**参数:**
+
+| 参数       | 类型      | 必填       | 描述                         |
+| ------ | -------| ---- | -------------------------- |
+| id     | string | 是    | 要触发事件的组件的id。                      |
+| action | number | 是    | 要触发的事件类型，目前支持取值：<br/>-&nbsp;点击事件Click:&nbsp;10<br/>-&nbsp;长按事件LongClick:&nbsp;11。 |
+| params | string | 是    | 事件参数，无参数传空字符串&nbsp;""。            |
+
+**返回值:**
 
-- 返回值
-  | 类型      | 描述                             |
-  | ------- | ------------------------------ |
-  | boolean | 找不到指定id的组件时返回false，其余情况返回true。 |
+| 类型          | 描述                         |
+| -------- | --------------------------|
+| boolean  | 找不到指定id的组件时返回false，其余情况返回true。 |
 
 ### sendTouchEvent
 
@@ -78,17 +77,17 @@ sendTouchEvent(event: TouchObject): boolean
 发送触摸事件。
 此接口为系统接口。
 
-- 参数
+**参数:**
 
-  | 参数    | 类型          | 必填   | 默认值  | 描述                                       |
-  | ----- | ----------- | ---- | ---- | ---------------------------------------- |
-  | event | TouchObject | 是    | -    | 触发触摸事件的位置，event参数见[TouchEvent](ts-universal-events-touch.md#touchevent对象说明)中TouchObject的介绍。 |
+| 参数      | 类型            | 必填  | 描述                                                         |
+| ----- | ----------- | ---- | ------------------------------------------------------------ |
+| event | [TouchObject](ts-universal-events-touch.md#touchobject对象说明) | 是    | 触发触摸事件的位置，event参数见[TouchEvent](ts-universal-events-touch.md#touchevent对象说明)中TouchObject的介绍。 |
 
-- 返回值
+**返回值:**
 
-  | 类型      | 描述                         |
-  | ------- | -------------------------- |
-  | boolean | 事件发送失败时返回false，其余情况返回true。 |
+| 类型      | 描述                         |
+| ------- | ---------------------------|
+| boolean | 事件发送失败时返回false，其余情况返回true。 |
 
 ### sendKeyEvent
 
@@ -97,17 +96,17 @@ sendKeyEvent(event: KeyEvent): boolean
 发送按键事件。
 此接口为系统接口。
 
-- 参数
+**参数:**
 
-  | 参数    | 类型       | 必填   | 默认值  | 描述                                       |
-  | ----- | -------- | ---- | ---- | ---------------------------------------- |
-  | event | KeyEvent | 是    | -    | 按键事件，event参数见[KeyEvent](ts-universal-events-key.md#keyevent对象说明)介绍。 |
+| 参数    | 类型     | 必填      | 描述                                                         |
+| ----- | -------- | ----  | ------------------------------------------------------------ |
+| event | [KeyEvent](ts-universal-events-key.md#keyevent对象说明) | 是     | 按键事件，event参数见[KeyEvent](ts-universal-events-key.md#keyevent对象说明)介绍。 |
 
-- 返回值
+**返回值:**
 
-  | 类型      | 描述                          |
-  | ------- | --------------------------- |
-  | boolean | 事件发送失败时时返回false，其余情况返回true。 |
+| 类型      | 描述                           |
+| ------- | ------------------------------|
+| boolean | 事件发送失败时时返回false，其余情况返回true。 |
 
 ### sendMouseEvent
 
@@ -116,17 +115,17 @@ sendMouseEvent(event: MouseEvent): boolean
 发送鼠标事件。
 此接口为系统接口。
 
-- 参数
+**参数：**
 
-  | 参数    | 类型         | 必填   | 默认值  | 描述                                       |
-  | ----- | ---------- | ---- | ---- | ---------------------------------------- |
-  | event | MouseEvent | 是    | -    | 鼠标事件，event参数见[MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明)介绍。 |
+| 参数     | 类型       | 必填       | 描述                                     |
+| ----- | ---------- | ----  | --------------------------------------- |
+| event | [MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明) | 是    | 鼠标事件，event参数见[MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明)介绍。 |
 
-- 返回值
+**返回值：**
 
-  | 类型      | 描述                          |
-  | ------- | --------------------------- |
-  | boolean | 事件发送失败时时返回false，其余情况返回true。 |
+| 类型      | 描述                                 |
+| ------- | ---------------------------------- |
+| boolean | 事件发送失败时返回false，其余情况返回true。 |
 
 ## 示例
 
@@ -139,6 +138,7 @@ class Utils {
   static rect_bottom;
   static rect_value;
 
+  //获取组件所占矩形区域坐标
   static getComponentRect(key) {
     let strJson = getInspectorByKey(key);
     let obj = JSON.parse(strJson);
@@ -178,32 +178,32 @@ struct IdExample {
         console.info(getInspectorTree())
         this.text = "Button 'click to start' is clicked"
         setTimeout(() => {
-          sendEventByKey("longclick", 11, "")
+          sendEventByKey("longClick", 11, "") // 向id为"longClick"的组件发送长按事件
         }, 2000)
       }).id('click')
 
       Button() {
-        Text('longclick').fontSize(25).fontWeight(FontWeight.Bold)
+        Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
       }.margin({ top: 20 }).backgroundColor('#0D9FFB')
       .gesture(
       LongPressGesture().onActionEnd(() => {
         console.info('long clicked')
-        this.text = "Button 'longclick' is longclicked"
+        this.text = "Button 'longClick' is longclicked"
         setTimeout(() => {
-          let rect = Utils.getComponentRect('onTouch')
+          let rect = Utils.getComponentRect('onTouch') // 获取id为"onTouch"组件的矩形区域坐标
           let touchPoint: TouchObject = {
             id: 1,
-            x: rect.left + (rect.right - rect.left) / 2,
-            y: rect.top + (rect.bottom - rect.top) / 2,
+            x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
+            y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
             type: TouchType.Down,
-            screenX: rect.left + (rect.right - rect.left) / 2,
-            screenY: rect.left + (rect.right - rect.left) / 2,
+            screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
+            screenY: rect.left + (rect.right - rect.left) / 2, // 组件中心点y坐标
           }
-          sendTouchEvent(touchPoint)
+          sendTouchEvent(touchPoint) // 发送触摸事件
           touchPoint.type = TouchType.Up
-          sendTouchEvent(touchPoint)
+          sendTouchEvent(touchPoint) // 发送触摸事件
         }, 2000)
-      })).id('longclick')
+      })).id('longClick')
 
       Button() {
         Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
@@ -212,14 +212,14 @@ struct IdExample {
         console.info('onTouch is clicked')
         this.text = "Button 'onTouch' is clicked"
         setTimeout(() => {
-          let rect = Utils.getComponentRect('onMouse')
+          let rect = Utils.getComponentRect('onMouse') // 获取id为"onMouse"组件的矩形区域坐标
           let mouseEvent: MouseEvent = {
             button: MouseButton.Left,
             action: MouseAction.Press,
-            x: rect.left + (rect.right - rect.left) / 2,
-            y: rect.top + (rect.bottom - rect.top) / 2,
-            screenX: rect.left + (rect.right - rect.left) / 2,
-            screenY: rect.top + (rect.bottom - rect.top) / 2,
+            x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
+            y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
+            screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
+            screenY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
             timestamp: 1,
             target: {
               area: {
@@ -237,7 +237,7 @@ struct IdExample {
             },
             source: SourceType.Mouse
           }
-          sendMouseEvent(mouseEvent)
+          sendMouseEvent(mouseEvent) // 发送鼠标事件
         }, 2000)
       }).id('onTouch')
 
@@ -257,7 +257,7 @@ struct IdExample {
             metaKey: 0,
             timestamp: 0
           }
-          sendKeyEvent(keyEvent)
+          sendKeyEvent(keyEvent) // 发送按键事件
         }, 2000)
       }).id('onMouse')
 

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

 # 颜色渐变
 
+设置组件的颜色渐变效果。
+
 >  **说明：**
+>
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 属性
 
 
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向，设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
-| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>rotation?:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center：为角度渐变的中心点。<br/>start：角度渐变的起点。<br/>end：角度渐变的终点。<br/>rotation:&nbsp;角度渐变的旋转角度。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
-| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center：径向渐变的中心点。<br/>radius：径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
+| 名称              | 参数类型                                         | 描述                               |
+| -------------- | -------------------------------------------- | ----------------------------------- |
+| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | 线性渐变。<br/>- angle:&nbsp;线性渐变的起始角度。0点方向顺时针旋转为正向角度。<br/>  默认值：180<br/>- direction:&nbsp;线性渐变的方向，设置angle后不生效。<br/>  默认值：GradientDirection.Bottom <br/>- colors:&nbsp;为渐变的颜色描述。<br/>- repeating:&nbsp;为渐变的颜色重复着色。 <br/>  默认值：false |
+| sweepGradient  | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>rotation?:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | 角度渐变。<br/>- center：为角度渐变的中心点，即相对于当前组件左上角的坐标。<br/>- start：角度渐变的起点。<br/>  默认值：0<br/>- end：角度渐变的终点。<br/>  默认值：0<br/>- rotation:&nbsp;角度渐变的旋转角度。<br/>  默认值：0<br/>- colors:&nbsp;为渐变的颜色描述。<br/>- repeating:&nbsp;为渐变的颜色重复着色。<br/>  默认值：false |
+| radialGradient | {<br/>center:&nbsp;Point,<br/> radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | 径向渐变。<br/>- center：径向渐变的中心点，即相对于当前组件左上角的坐标。<br/>- radius：径向渐变的半径。<br/>- colors:&nbsp;为渐变的颜色描述。<br/>- repeating:&nbsp;为渐变的颜色重复着色。<br/>  默认值：false |
 
 
 ## 示例
@@ -34,8 +32,32 @@ struct ColorGradientExample {
         .height(50)
         .linearGradient({
           angle: 90,
-          colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
+          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
+        })
+      Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
+      Row()
+        .width('90%')
+        .height(50)
+        .linearGradient({
+          direction: GradientDirection.Left, // 渐变方向
+          repeating: true, // 渐变颜色是否重复
+          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
         })
+    }
+    .width('100%')
+    .padding({ top: 5 })
+  }
+}
+```
+
+![zh-cn_image_0000001219864149](figures/gradientColor1.png)
+
+```ts
+@Entry
+@Component
+struct ColorGradientExample {
+  build() {
+    Column({ space: 5 }) {
       Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
       Row()
         .width(100)
@@ -44,8 +66,37 @@ struct ColorGradientExample {
           center: [50, 50],
           start: 0,
           end: 359,
-          colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
+          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
         })
+      
+      Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
+      Row()
+        .width(100)
+        .height(100)
+        .sweepGradient({
+          center: [50, 50],
+          start: 0,
+          end: 359,
+          rotation: 45, // 旋转角度
+          repeating: true, // 渐变颜色是否重复
+          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
+        })
+    }
+    .width('100%')
+    .padding({ top: 5 })
+  }
+}
+```
+
+![zh-cn_image_0000001219864149](figures/gradientColor2.png)
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ColorGradientExample {
+  build() {
+    Column({ space: 5 }) {
       Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
       Row()
         .width(100)
@@ -53,7 +104,17 @@ struct ColorGradientExample {
         .radialGradient({
           center: [50, 50],
           radius: 60,
-          colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
+          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
+        })
+      Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
+      Row()
+        .width(100)
+        .height(100)
+        .radialGradient({
+          center: [50, 50],
+          radius: 60,
+          repeating: true,
+          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
         })
     }
     .width('100%')
@@ -62,4 +123,4 @@ struct ColorGradientExample {
 }
 ```
 
-![zh-cn_image_0000001219864149](figures/zh-cn_image_0000001219864149.png)
+![zh-cn_image_0000001219864149](figures/gradientColor3.png)