1# Stepper 2 3步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。 4 5 6> **说明：** 7> 8> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 子组件 12 13仅能包含子组件[StepperItem](ts-basic-components-stepperitem.md)。 14 15 16## 接口 17 18Stepper(value?: { index?: number }) 19 20**参数：** 21 22| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 23| ------ | -------- | ---- | ------ | ------------------------------------------- | 24| index | number | 否 | 0 | 设置步骤导航器当前显示StepperItem的索引值。 | 25 26## 属性 27 28无 29 30 31## 事件 32 33| 名称 | 描述 | 34| ------------------------------------------------------------ | ------------------------------------------------------------ | 35| onFinish(callback: () => void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调 。 | 36| onSkip(callback: () => void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 | 37| onChange(callback: (prevIndex?: number, index?: number) => void) | 点击当前StepperItem的prevLabel或nextLabel进行步骤切换时触发该回调。<br/>- prevIndex：切换前的步骤页索引值。<br/>- index：切换后的步骤页（前一页或者下一页）索引值。 | 38| onNext(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的nextLabel切换下一步骤时触发该回调。<br/>- index：当前步骤页索引值。<br/>- pendingIndex：下一步骤页索引值。 | 39| onPrevious(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。<br/>- index：当前步骤页索引值。<br/>- pendingIndex：上一步骤页索引值。 | 40 41 42## 示例 43 44```ts 45// xxx.ets 46@Entry 47@Component 48struct StepperExample { 49 @State currentIndex: number = 0; 50 @State firstState: ItemState = ItemState.Normal; 51 @State secondState: ItemState = ItemState.Normal; 52 @State thirdState: ItemState = ItemState.Normal; 53 54 build() { 55 Stepper({ 56 index: this.currentIndex 57 }) { 58 // 第一个步骤页 59 StepperItem() { 60 Column() { 61 Text('Page One') 62 .fontSize(35) 63 .fontColor(Color.Blue) 64 .lineHeight(50) 65 .margin({ top: 250, bottom: 50 }) 66 Button('change status:' + this.firstState) 67 .onClick(() => { 68 this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip; 69 }) 70 }.width('100%') 71 } 72 .nextLabel('Next') 73 .status(this.firstState) 74 // 第二个步骤页 75 StepperItem() { 76 Column() { 77 Text('Page Two') 78 .fontSize(35) 79 .fontColor(Color.Blue) 80 .lineHeight(50) 81 .margin({ top: 250, bottom: 50 }) 82 Button('change status:' + this.secondState) 83 .onClick(() => { 84 this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled; 85 }) 86 }.width('100%') 87 } 88 .nextLabel('Next') 89 .prevLabel('Previous') 90 .status(this.secondState) 91 // 第三个步骤页 92 StepperItem() { 93 Column() { 94 Text('Page Three') 95 .fontSize(35) 96 .fontColor(Color.Blue) 97 .lineHeight(50) 98 .margin({ top: 250, bottom: 50 }) 99 Button('change status:' + this.thirdState) 100 .onClick(() => { 101 this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting; 102 }) 103 }.width('100%') 104 } 105 .status(this.thirdState) 106 // 第四个步骤页 107 StepperItem() { 108 Text('Page four') 109 .fontSize(35) 110 .fontColor(Color.Blue) 111 .width('100%') 112 .textAlign(TextAlign.Center) 113 .lineHeight(50) 114 .margin({ top: 250 }) 115 } 116 .nextLabel('Finish') 117 } 118 .onFinish(() => { 119 // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等 120 console.info('onFinish'); 121 }) 122 .onSkip(() => { 123 // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等 124 console.info('onSkip'); 125 }) 126 .onChange((prevIndex: number, index: number) => { 127 this.currentIndex = index; 128 }) 129 } 130} 131``` 132 133 134 135 136
