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| ------| -------- | --------------- | -------- | 25| index | number | 否 | 设置步骤导航器当前显示StepperItem的索引值。<br/>默认值：0 | 26 27 28## 属性 29 30无 31 32 33## 事件 34 35| 名称 | 描述 | 36| -------- | -------- | 37| onFinish(callback: () => void) | 步骤导航器最后一个StepperItem的nextLabel被点击时，并且ItemState属性为Normal时，触发该回调 。 | 38| onSkip(callback: () => void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 | 39| onChange(callback: (prevIndex?: number, index?: number) => void) | 点击当前StepperItem的prevLabel进行步骤切换时触发该回调；或点击当前StepperItem的nextLabel，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。<br/>- prevIndex：切换前的步骤页索引值。<br/>- index：切换后的步骤页（前一页或者下一页）索引值。 | 40| onNext(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的nextLabel切换下一步骤时，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。<br/>- index：当前步骤页索引值。<br/>- pendingIndex：下一步骤页索引值。 | 41| onPrevious(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。<br/>- index：当前步骤页索引值。<br/>- pendingIndex：上一步骤页索引值。 | 42 43 44## 示例 45 46```ts 47// xxx.ets 48@Styles function itemStyle () { 49 .width(336) 50 .height(621) 51 .margin({ top: 48, left: 12 }) 52 .borderRadius(24) 53 .backgroundColor('#FFFFFF') 54} 55 56@Extend(Text) function itemTextStyle () { 57 .fontColor('#182431') 58 .fontSize(36) 59 .fontWeight(500) 60 .opacity(0.4) 61 .margin({ top: 82, bottom: 40 }) 62} 63 64@Entry 65@Component 66struct StepperExample { 67 @State currentIndex: number = 0 68 @State firstState: ItemState = ItemState.Normal 69 @State secondState: ItemState = ItemState.Normal 70 @State thirdState: ItemState = ItemState.Normal 71 72 build() { 73 Stepper({ 74 index: this.currentIndex 75 }) { 76 // 第一个步骤页 77 StepperItem() { 78 Column() { 79 Text('Page One') 80 .itemTextStyle() 81 Button('change status:' + this.firstState) 82 .backgroundColor('#007dFF') 83 .onClick(() => { 84 this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip 85 }) 86 }.itemStyle() 87 } 88 .nextLabel('Next') 89 .status(this.firstState) 90 // 第二个步骤页 91 StepperItem() { 92 Column() { 93 Text('Page Two') 94 .itemTextStyle() 95 Button('change status:' + this.secondState) 96 .backgroundColor('#007dFF') 97 .onClick(() => { 98 this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled 99 }) 100 }.itemStyle() 101 } 102 .nextLabel('Next') 103 .prevLabel('Previous') 104 .status(this.secondState) 105 // 第三个步骤页 106 StepperItem() { 107 Column() { 108 Text('Page Three') 109 .itemTextStyle() 110 Button('change status:' + this.thirdState) 111 .backgroundColor('#007dFF') 112 .onClick(() => { 113 this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting 114 }) 115 }.itemStyle() 116 } 117 .status(this.thirdState) 118 // 第四个步骤页 119 StepperItem() { 120 Column() { 121 Text('Page Four') 122 .itemTextStyle() 123 }.itemStyle() 124 } 125 } 126 .backgroundColor('#F1F3F5') 127 .onFinish(() => { 128 // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等 129 console.info('onFinish') 130 }) 131 .onSkip(() => { 132 // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等 133 console.info('onSkip') 134 }) 135 .onChange((prevIndex: number, index: number) => { 136 this.currentIndex = index 137 }) 138 } 139} 140``` 141 142 143 144 145
