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

Signed-off-by: Nluoying_ace <luoying19@huawei.com>

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

 # Stepper
 
-应用步骤方式切换页面的组件。
+步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。
 
 
 >  **说明：**
@@ -8,8 +8,6 @@
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-
-
 ## 子组件
 
 仅能包含子组件[StepperItem](ts-basic-components-stepperitem.md)。
@@ -24,7 +22,7 @@ Stepper(value?: { index?: number })
 
 | 参数名 | 参数类型 | 必填  | 参数描述 |
 | ------| -------- | --------------- | -------- |
-| index | number   | 否 | 设置步骤导航器显示第几个StepperItem。<br/>默认值：0 |
+| index | number   | 否 | 设置步骤导航器当前显示StepperItem的索引值。<br/>默认值：0 |
 
 
 ## 属性
@@ -38,9 +36,9 @@ Stepper(value?: { index?: number })
 | -------- | -------- |
 | onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
 | onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
-| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
-| onNext(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击切换下一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：下一步骤页索引值。 |
-| onPrevious(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击切换上一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 |
+| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击当前StepperItem的prevLabel或nextLabel进行步骤切换时触发该回调。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
+| onNext(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击StepperItem的nextLabel切换下一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：下一步骤页索引值。 |
+| onPrevious(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 |
 
 
 ## 示例
@@ -50,76 +48,86 @@ Stepper(value?: { index?: number })
 @Entry
 @Component
 struct StepperExample {
-  @State currentIndex: number = 0
-  @State firstState: ItemState = ItemState.Normal
-  @State secondState: ItemState = ItemState.Normal
+  @State currentIndex: number = 0;
+  @State firstState: ItemState = ItemState.Normal;
+  @State secondState: ItemState = ItemState.Normal;
+  @State thirdState: ItemState = ItemState.Normal;
 
   build() {
     Stepper({
       index: this.currentIndex
     }) {
+      // 第一个步骤页
       StepperItem() {
-        Text('Page One')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({ top: 250 })
+        Column() {
+          Text('Page One')
+            .fontSize(35)
+            .fontColor(Color.Blue)
+            .lineHeight(50)
+            .margin({ top: 250, bottom: 50 })
+          Button('change status:' + this.firstState)
+            .onClick(() => {
+              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
+            })
+        }.width('100%')
       }
-      .nextLabel('')
-      .position({ x: '35%', y: 0 })
-
+      .nextLabel('Next')
+      .status(this.firstState)
+      // 第二个步骤页
       StepperItem() {
-        Text('Page Two')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({ top: 250 })
-          .onClick(() => {
-            this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
-          })
+        Column() {
+          Text('Page Two')
+            .fontSize(35)
+            .fontColor(Color.Blue)
+            .lineHeight(50)
+            .margin({ top: 250, bottom: 50 })
+          Button('change status:' + this.secondState)
+            .onClick(() => {
+              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
+            })
+        }.width('100%')
       }
       .nextLabel('Next')
       .prevLabel('Previous')
-      .status(this.firstState)
-      .position({ x: '35%', y: 0 })
-
+      .status(this.secondState)
+      // 第三个步骤页
       StepperItem() {
-        Text('Page Three')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({ top: 250 })
-          .onClick(() => {
-            this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
-          })
+        Column() {
+          Text('Page Three')
+            .fontSize(35)
+            .fontColor(Color.Blue)
+            .lineHeight(50)
+            .margin({ top: 250, bottom: 50 })
+          Button('change status:' + this.thirdState)
+            .onClick(() => {
+              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
+            })
+        }.width('100%')
       }
-      .position({ x: '35%', y: 0 })
-      .status(this.secondState)
-
+      .status(this.thirdState)
+      // 第四个步骤页
       StepperItem() {
         Text('Page four')
           .fontSize(35)
           .fontColor(Color.Blue)
-          .width(200)
+          .width('100%')
+          .textAlign(TextAlign.Center)
           .lineHeight(50)
           .margin({ top: 250 })
       }
-      .position({ x: '35%', y: 0 })
       .nextLabel('Finish')
     }
     .onFinish(() => {
-      console.log('onFinish')
+      // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
+      console.info('onFinish');
     })
     .onSkip(() => {
-      console.log('onSkip')
+      // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
+      console.info('onSkip');
     })
     .onChange((prevIndex: number, index: number) => {
-      this.currentIndex = index
+      this.currentIndex = index;
     })
-    .align(Alignment.Center)
   }
 }
 ```