update scroll

Signed-off-by: Nyamila <tianyu55@huawei.com>

zh-cn/application-dev/quick-start/arkts-state-mgmt-page-level.md

@@ -468,6 +468,11 @@ struct CompC {
 
 装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink所装饰的变量均可以通过@Watch监听其变化。
 
+
+>  **说明：**
+>
+>  深层次数据修改不会触发@Watch回调，例如无法监听数组中对象值的改变。
+
 ```ts
 // xxx.ets
 @Entry

zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md

@@ -64,74 +64,77 @@
 
 ```html
 <!-- xxx.hml -->
-<div class="container">
-  <marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}"
-    onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee>
-  <div class="content">
-    <button class="controlButton" onclick="onStartClick">Start</button>
-    <button class="controlButton" onclick="onStopClick">Stop</button>
+<div class="tutorial-page">
+  <div class="mymarquee">
+    <marquee  style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" 
+    id="testmarquee" onfinish="setfinish">
+      Life is a journey, not the destination.
+    </marquee>
+  </div>
+  <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
+    <button onclick="makestart"  value="start"></button>
+    <button onclick="makestop" value="stop"></button>
   </div>
 </div>
 ```
 
 ```css
 /* xxx.css */
-.container {
+.tutorial-page {
+  width: 750px;
+  height: 100%;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  background-color: #ffffff;
+  justify-content: center;
 }
-.customMarquee {
-  width: 100%;
-  height: 80px;
-  padding: 10px;
-  margin: 20px;
-  border: 4px solid #ff8888;
-  border-radius: 20px;
-  font-size: 40px;
-  color: #ff8888;
-  font-weight: bolder;
-  font-family: serif;
-  background-color: #ffdddd;
+.marqueetext {
+  font-size: 37px;
 }
-.content {
-  flex-direction: row;
+.mymarquee {
+  margin-top: 20px;
+  width:100%;
+  height: 100px;
+  margin-left: 50px;
+  margin-right: 50px;
+  border: 1px solid #dc0f27;
+  border-radius: 15px;
+  align-items: center;
 }
-.controlButton {
-  flex-grow: 1;
-  background-color: #F2F2F2;
-  text-color: #0D81F2;
+button{
+  width: 200px;
+  height: 80px;
+  margin-top: 100px;
 }
 ```
 
 ```js
 // xxx.js
 export default {
-  data: {
-    scrollAmount: 30,
-    loop: 3,
-    marqueeDir: 'left',
-    marqueeCustomData: 'Custom marquee',
-  },
-  onMarqueeBounce: function() {
-    console.log("onMarqueeBounce");
+  private: {
+    loopval: 1,
+    scroll: 8,
+    color1: 'red'
   },
-  onMarqueeStart: function() {
-    console.log("onMarqueeStart");
+  onInit(){
   },
-  onMarqueeFinish: function() {
-    console.log("onMarqueeFinish");
+  setfinish(e) {
+    this.loopval=  this.loopval + 1,
+    this.r = Math.floor(Math.random()*255),
+    this.g = Math.floor(Math.random()*255),
+    this.b = Math.floor(Math.random()*255),
+    this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)',
+    this.$element('testmarquee').start(),
+    this.loopval=  this.loopval - 1
   },
-  onStartClick (evt) {
-    this.$element('customMarquee').start();
+  makestart(e) {
+    this.$element('testmarquee').start()
   },
-  onStopClick (evt) {
-    this.$element('customMarquee').stop();
+  makestop(e) {
+    this.$element('testmarquee').stop()
   }
 }
 ```
 
-![zh-cn_image_0000001127284934](figures/zh-cn_image_0000001127284934.gif)
+![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif)
 
 

zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md

@@ -170,19 +170,24 @@
             {{ item }}
         </option>
     </select>
-  <picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
-    oncancel="textoncancel" class="pickertext"></picker>
+    <picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
+            onchange="textonchange"
+            oncancel="textoncancel" class="pickertext" show="false"></picker>
 
-  <picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
+    <picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}"
+            lunarswitch="true"
             onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
 
-  <picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12"
+    <picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
+            selected="{{ timeselect }}" hours="12"
             onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
 
-  <picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true"
+    <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
+            lunarswitch="true"
             onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
 
-  <picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}"
+    <picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
+            selected="{{ multitextselect }}"
             onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
 </div>
 ```
@@ -194,16 +199,18 @@
     justify-content: center;
     align-items: center;
 }
- picker{
-  width:60%;
-  height:80px;
-  border-radius:20px;
-  text-color:white;
-  font-size:15px;
-  background-color:#4747e3;
-  margin-left:20%;
+
+picker {
+    width: 60%;
+    height: 80px;
+    border-radius: 20px;
+    text-color: white;
+    font-size: 15px;
+    background-color: #4747e3;
+    margin-left: 20%;
 }
- select{
+
+select {
     background-color: #efecec;
     height: 50px;
     width: 60%;
@@ -218,68 +225,92 @@
 // xxx.js
 import router from '@system.router';
 import prompt from '@system.prompt';
+
 export default {
     data: {
-    selectList:["text","data","time","datetime","multitext"],
-    rangetext:['15', "20", "25"],    
-    multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],    
-    textvalue:'default textvalue',    
-    datevalue:'default datevalue',    
-    timevalue:'default timevalue',    
-    datetimevalue:'default datetimevalue',    
-    multitextvalue:'default multitextvalue',    
-    containsecond:true,    
-    multitextselect:[1,2,0],    
-    datetimeselect:'2012-5-6-11-25',    
-    timeselect:'11:22:30',    
-    dateselect:'2021-3-2',    
-    textselect:'2'
+        selectList: ["text", "data", "time", "datetime", "multitext"],
+        rangetext: ['15', "20", "25"],
+        multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
+        textvalue: 'default textvalue',
+        datevalue: 'default datevalue',
+        timevalue: 'default timevalue',
+        datetimevalue: 'default datetimevalue',
+        multitextvalue: 'default multitextvalue',
+        containsecond: true,
+        multitextselect: [1, 2, 0],
+        datetimeselect: '2012-5-6-11-25',
+        timeselect: '11:22:30',
+        dateselect: '2021-3-2',
+        textselect: '2'
     },
-  selectChange(e){
-        for(let i = 0;i<this.selectList.length;i++){
-            if(e.newValue == this.selectList[i]){
-                this.$element("picker"+i).show();
+    selectChange(e) {
+        for (let i = 0;i < this.selectList.length; i++) {
+            if (e.newValue == this.selectList[i]) {
+                this.$element("picker" + i).show();
             }
         }
     },
     textonchange(e) {
         this.textvalue = e.newValue;
-    prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
+        prompt.showToast({
+            message: "text:" + e.newValue + ",newSelected:" + e.newSelected
+        })
     },
     textoncancel(e) {
-    prompt.showToast({ message:"text: textoncancel" })
+        prompt.showToast({
+            message: "text: textoncancel"
+        })
     },
     dateonchange(e) {
         this.datevalue = e.year + "-" + e.month + "-" + e.day;
-    prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day })
+        prompt.showToast({
+            message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
+        })
     },
     dateoncancel() {
-    prompt.showToast({ message:"date: dateoncancel" })
+        prompt.showToast({
+            message: "date: dateoncancel"
+        })
     },
     timeonchange(e) {
-    if(this.containsecond){        
-      this.timevalue=e.hour+":"+e.minute+":"+e.second;        
-      prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second })
+        if (this.containsecond) {
+            this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
+            prompt.showToast({
+                message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
+            })
         } else {
-      this.timevalue=e.hour+":"+e.minute;        
-      prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute })
-    }},
+            this.timevalue = e.hour + ":" + e.minute;
+            prompt.showToast({
+                message: "Time:" + e.hour + ":" + e.minute
+            })
+        }
+    },
     timeoncancel() {
-    prompt.showToast({ message:"timeoncancel" })
+        prompt.showToast({
+            message: "timeoncancel"
+        })
     },
     datetimeonchange(e) {
-    this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute;    
-    prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute })
+        this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
+        prompt.showToast({
+            message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
+        })
     },
     datetimeoncancel() {
-    prompt.showToast({ message:"datetimeoncancel" })
+        prompt.showToast({
+            message: "datetimeoncancel"
+        })
     },
     multitextonchange(e) {
-    this.multitextvalue=e.newValue;    
-    prompt.showToast({ message:"Multi-column text change" + e.newValue })
+        this.multitextvalue = e.newValue;
+        prompt.showToast({
+            message: "Multi-column text change" + e.newValue
+        })
     },
     multitextoncancel() {
-    prompt.showToast({ message:"multitextoncancel" })
+        prompt.showToast({
+            message: "multitextoncancel"
+        })
     },
     popup_picker() {
         this.$element("picker_text").show();

zh-cn/application-dev/reference/arkui-js/js-components-container-list.md

@@ -118,10 +118,10 @@ export default {
   data: {
     todolist: [{
       title: '刷题',
-      date: '2021-12-31 10:00:00',
+      date: '2021-12-31 10:00:00'
     }, {
       title: '看电影',
-      date: '2021-12-31 20:00:00',
+      date: '2021-12-31 20:00:00'
     }],
   },
 }

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

@@ -91,7 +91,7 @@
     <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
         <div class="panel-div">
             <div class="inner-txt">
-        <text class="txt">Simple panel in {{modeFlag}} mode</text>
+                <text class="txt">Simple panel in {{ modeFlag }} mode</text>
             </div>
             <div class="inner-btn">
                 <button type="capsule" value="Close" onclick="closePanel"></button>
@@ -108,6 +108,7 @@
     justify-content: center;
     align-items: center;
 }
+
 .btn-div {
     width: 100%;
     height: 200px;
@@ -115,16 +116,19 @@
     align-items: center;
     justify-content: center;
 }
+
 .txt {
     color: #000000;
     font-weight: bold;
     font-size: 39px;
 }
+
 .panel-div {
     width: 100%;
     flex-direction: column;
     align-items: center;
 }
+
 .inner-txt {
     width: 100%;
     height: 160px;
@@ -132,6 +136,7 @@
     align-items: center;
     justify-content: center;
 }
+
 .inner-btn {
     width: 100%;
     height: 120px;

zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md

@@ -115,7 +115,7 @@ export default {
   visibilitychange(e) {
     prompt.showToast({
       message: 'visibility change visibility: ' + e.visibility,
-        duration: 3000,
+        duration: 3000
     }); 
   },
   showpopup() {
@@ -123,7 +123,7 @@ export default {
   },
   hidepopup() {
     this.$element("popup").hide();
-  },
+  }
 }
 ```
 

zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md

@@ -62,25 +62,25 @@
 
 ```html
 <!-- xxx.hml -->
-<div class = "container">
+<div class="container">
     <stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick">
-    <stepper-item class ="stepperItem" label="{{label_1}}">
-      <div class = "stepperItemContent" >
-        <text class = "text">First screen</text>
+        <stepper-item class="stepperItem" label="{{ label_1 }}">
+            <div class="stepperItemContent">
+                <text>First screen</text>
             </div>
-      <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
+            <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
         </stepper-item>
-    <stepper-item class ="stepperItem" label="{{label_2}}">
-      <div class = "stepperItemContent" >
-        <text class = "text">Second screen</text>
+        <stepper-item class="stepperItem" label="{{ label_2 }}">
+            <div class="stepperItemContent">
+                <text>Second screen</text>
             </div>
-      <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
+            <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
         </stepper-item>
-    <stepper-item class ="stepperItem" label="{{label_3}}">
-      <div class = "stepperItemContent" >
-        <text class = "text">Third screen</text>
+        <stepper-item class="stepperItem" label="{{ label_3 }}">
+            <div class="stepperItemContent">
+                <text>Third screen</text>
             </div>
-      <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
+            <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
         </stepper-item>
     </stepper>
 </div>
@@ -94,16 +94,18 @@
     align-items: center;
     height: 300px;
 }
+
 .stepperItem {
     width: 100%;
     flex-direction: column;
     align-items: center;
 }
+
 .stepperItemContent {
-  color: #0000ff;
     font-size: 50px;
     justify-content: center;
 }
+
 .button {
     width: 60%;
     margin-top: 30px;
@@ -132,10 +134,12 @@ export default {
             prevLabel: 'BACK',
             nextLabel: 'NEXT',
             status: 'normal'
-     },
+        }
     },
     setRightButton(e) {
-    this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('mystepper').setNextButtonStatus({
+            status: 'skip', label: 'SKIP'
+        });
     },
     nextclick(e) {
         var index = {
@@ -148,7 +152,7 @@ export default {
             pendingIndex: e.pendingIndex
         }
         return index;
-  },
+    }
 }
 ```
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md

@@ -47,7 +47,7 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance
 | --------- | ------------ | ---- | ------------------------------------------------------------ |
 | fingers   | number       | 否   | 触发滑动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
 | direction | PanDirection | 否   | 设置滑动方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：All |
-| distance  | number       | 否   | 最小滑动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
+| distance  | number       | 否   | 最小滑动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> [Tabs组件](ts-container-tabs.md)滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
 
 **接口**
 

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

@@ -17,19 +17,19 @@ addColorStop(offset: number, color: string): void
 
 **参数：**
 
-  | 参数     | 类型     | 必填   | 默认值       | 描述                           |
-  | ------ | ------ | ---- | --------- | ---------------------------- |
-  | offset | number | 是    | 0         | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
-  | color  | string | 是    | '#ffffff' | 设置渐变的颜色。                     |
+| 参数     | 类型     | 必填   | 默认值       | 描述                           |
+| ------ | ------ | ---- | --------- | ---------------------------- |
+| offset | number | 是    | 0         | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
+| color  | string | 是    | '#ffffff' | 设置渐变的颜色。                     |
 
 
 **示例：**
 
   ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct Page45 {
+// xxx.ets
+@Entry
+@Component
+struct Page45 {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
@@ -39,8 +39,8 @@ addColorStop(offset: number, color: string): void
         .width('100%')
         .height('100%')
         .backgroundColor('#ffff00')
-          .onReady(() =>{
-            var grad = this.context.createLinearGradient(50,0, 300,100)
+        .onReady(() => {
+          var grad = this.context.createLinearGradient(50, 0, 300, 100)
           grad.addColorStop(0.0, 'red')
           grad.addColorStop(0.5, 'white')
           grad.addColorStop(1.0, 'green')
@@ -50,7 +50,8 @@ addColorStop(offset: number, color: string): void
     }
     .width('100%')
     .height('100%')
-    }}
+  }
+}
   ```
   ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
 

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

@@ -245,8 +245,11 @@ struct NestedScroll {
           Text("Scroll Area")
             .width("100%").height("40%").backgroundColor(0X330000FF)
             .fontSize(16).textAlign(TextAlign.Center)
+            .onClick(() => {
+              this.scroller.scrollToIndex(5)
+            })
 
-          List({ space: 20 }) {
+          List({ space: 20, scroller: this.scroller }) {
             ForEach(this.arr, (item) => {
               ListItem() {
                 Text("ListItem" + item)
@@ -255,7 +258,9 @@ struct NestedScroll {
               }.width("100%").height(100)
             }, item => item)
           }
-          .width("100%").height("50%").edgeEffect(EdgeEffect.None)
+          .width("100%")
+          .height("50%")
+          .edgeEffect(EdgeEffect.None)
           .onReachStart(() => {
             this.listPosition = 0;
           })

zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md

@@ -21,8 +21,8 @@
 | type | [TransitionType](ts-appendix-enums.md#transitiontype)  | 否 | 默认包括组件新增和删除。<br/>默认值：TransitionType.All<br/>**说明：**<br/>不指定Type时说明插入删除使用同一种效果。 |
 | opacity | number | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。<br/>默认值：1 |
 | translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。<br/>-x：横向的平移距离。<br/>-y：纵向的平移距离。<br/>-z：竖向的平移距离。 |
-| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。<br/>-x：横向放大倍数（或缩小比例）。<br/>-y：纵向放大倍数（或缩小比例）。<br/>-z：竖向放大倍数（或缩小比例）。<br/>-&nbsp;centerX、centerY缩放中心点。<br/>-&nbsp;中心点为0时，默认的是组件的左上角。<br/> |
-| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。<br/>-x：横向的旋转向量。<br/>-y：纵向的旋转向量。<br/>-z：竖向的旋转向量。<br/>-&nbsp;centerX,centerY指旋转中心点。<br/>-&nbsp;中心点为（0，0）时，默认的是组件的左上角。 |
+| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。<br/>-x：横向放大倍数（或缩小比例）。<br/>-y：纵向放大倍数（或缩小比例）。<br/>-z：竖向放大倍数（或缩小比例）。<br/>-&nbsp;centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"。<br/>-&nbsp;中心点为0时，默认的是组件的左上角。<br/> |
+| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerX?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。<br/>-x：横向的旋转向量。<br/>-y：纵向的旋转向量。<br/>-z：竖向的旋转向量。<br/>-&nbsp;centerX,centerY指旋转中心点，centerX和centerY默认值是"50%"。<br/>-&nbsp;中心点为（0，0）时，默认的是组件的左上角。 |
 
 
 ## 示例

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

@@ -41,7 +41,7 @@
 @Entry
 @Component
 struct Index {
-  @State outSetValue: number = 40;
+  @State outSetValue: number = 40
 
   build() {
     Row() {
@@ -85,7 +85,7 @@ struct Index {
   build() {
     Row() {
       Column() {
-        Text('This is gradient color.').textAlign(TextAlign.Center)
+        Text('This is gradient color.').textAlign(TextAlign.Center).width(68)
           .borderImage({
             source: {
               angle: 90,