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**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
21
22**系统能力：** SystemCapability.ArkUI.ArkUI.Full
23
24**参数:**
25
26| 参数名 | 类型 | 必填  | 说明 |
27| ------| -------- | --------------- | -------- |
28| value | { index?: number }   | 否 | 设置步骤导航器当前显示StepperItem的索引值。<br/>默认值：0<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 |
29
30
31## 属性
32
33无
34
35## 事件
36
37### onFinish
38
39onFinish(callback: () => void)
40
41步骤导航器最后一个StepperItem的nextLabel被点击时，并且ItemState属性为Normal时，触发该回调。
42
43**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
44
45**系统能力：** SystemCapability.ArkUI.ArkUI.Full
46
47### onSkip
48
49onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void)
50
51当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。
52
53**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
54
55**系统能力：** SystemCapability.ArkUI.ArkUI.Full
56
57### onChange
58
59onChange(callback:&nbsp;(prevIndex:&nbsp;number,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void)
60
61点击当前StepperItem的prevLabel进行步骤切换时触发该回调；或点击当前StepperItem的nextLabel，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。
62
63**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
64
65**系统能力：** SystemCapability.ArkUI.ArkUI.Full
66
67**参数：** 
68
69| 参数名    | 类型   | 必填 | 说明                                       |
70| --------- | ------ | ---- | ------------------------------------------ |
71| prevIndex | number | 是   | 切换前的步骤页索引值。                     |
72| index     | number | 是   | 切换后的步骤页（前一页或者下一页）索引值。 |
73
74### onNext
75
76onNext(callback:&nbsp;(index:&nbsp;number,&nbsp;pendingIndex:&nbsp;number)&nbsp;=&gt;&nbsp;void)
77
78点击StepperItem的nextLabel切换下一步骤时，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。
79
80**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
81
82**系统能力：** SystemCapability.ArkUI.ArkUI.Full
83
84**参数：** 
85
86| 参数名       | 类型   | 必填 | 说明               |
87| ------------ | ------ | ---- | ------------------ |
88| index        | number | 是   | 当前步骤页索引值。 |
89| pendingIndex | number | 是   | 下一步骤页索引值。 |
90
91### onPrevious
92
93onPrevious(callback:&nbsp;(index:&nbsp;number,&nbsp;pendingIndex:&nbsp;number)&nbsp;=&gt;&nbsp;void)
94
95点击StepperItem的prevLabel切换上一步骤时触发该回调。
96
97**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
98
99**系统能力：** SystemCapability.ArkUI.ArkUI.Full
100
101**参数：** 
102
103| 参数名       | 类型   | 必填 | 说明               |
104| ------------ | ------ | ---- | ------------------ |
105| index        | number | 是   | 当前步骤页索引值。 |
106| pendingIndex | number | 是   | 上一步骤页索引值。 |
107
108
109## 示例
110
111```ts
112// xxx.ets
113@Styles function itemStyle () {
114  .width(336)
115  .height(621)
116  .margin({ top: 48, left: 12 })
117  .borderRadius(24)
118  .backgroundColor('#FFFFFF')
119}
120
121@Extend(Text) function itemTextStyle () {
122  .fontColor('#182431')
123  .fontSize(36)
124  .fontWeight(500)
125  .opacity(0.4)
126  .margin({ top: 82, bottom: 40 })
127}
128
129@Entry
130@Component
131struct StepperExample {
132  @State currentIndex: number = 0
133  @State firstState: ItemState = ItemState.Normal
134  @State secondState: ItemState = ItemState.Normal
135  @State thirdState: ItemState = ItemState.Normal
136
137  build() {
138    Stepper({
139      index: this.currentIndex
140    }) {
141      // 第一个步骤页
142      StepperItem() {
143        Column() {
144          Text('Page One')
145            .itemTextStyle()
146          Button('change status:' + this.firstState)
147            .backgroundColor('#007dFF')
148            .onClick(() => {
149              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
150            })
151        }.itemStyle()
152      }
153      .nextLabel('Next')
154      .status(this.firstState)
155      // 第二个步骤页
156      StepperItem() {
157        Column() {
158          Text('Page Two')
159            .itemTextStyle()
160          Button('change status:' + this.secondState)
161            .backgroundColor('#007dFF')
162            .onClick(() => {
163              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
164            })
165        }.itemStyle()
166      }
167      .nextLabel('Next')
168      .prevLabel('Previous')
169      .status(this.secondState)
170      // 第三个步骤页
171      StepperItem() {
172        Column() {
173          Text('Page Three')
174            .itemTextStyle()
175          Button('change status:' + this.thirdState)
176            .backgroundColor('#007dFF')
177            .onClick(() => {
178              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
179            })
180        }.itemStyle()
181      }
182      .status(this.thirdState)
183      // 第四个步骤页
184      StepperItem() {
185        Column() {
186          Text('Page Four')
187            .itemTextStyle()
188        }.itemStyle()
189      }
190    }
191    .backgroundColor('#F1F3F5')
192    .onFinish(() => {
193      // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
194      console.info('onFinish')
195    })
196    .onSkip(() => {
197      // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
198      console.info('onSkip')
199    })
200    .onChange((prevIndex?: number, index?: number) => {
201      if(index){
202        this.currentIndex = index
203      }
204    })
205  }
206}
207```
208
209
210![stepper](figures/stepper.gif)
211
212