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该示例主要演示如何使用步骤导航器组件。
112
113```ts
114// xxx.ets
115@Styles function itemStyle () {
116  .width(336)
117  .height(621)
118  .margin({ top: 48, left: 12 })
119  .borderRadius(24)
120  .backgroundColor('#FFFFFF')
121}
122
123@Extend(Text) function itemTextStyle () {
124  .fontColor('#182431')
125  .fontSize(36)
126  .fontWeight(500)
127  .opacity(0.4)
128  .margin({ top: 82, bottom: 40 })
129}
130
131@Entry
132@Component
133struct StepperExample {
134  @State currentIndex: number = 0
135  @State firstState: ItemState = ItemState.Normal
136  @State secondState: ItemState = ItemState.Normal
137  @State thirdState: ItemState = ItemState.Normal
138
139  build() {
140    Stepper({
141      index: this.currentIndex
142    }) {
143      // 第一个步骤页
144      StepperItem() {
145        Column() {
146          Text('Page One')
147            .itemTextStyle()
148          Button('change status:' + this.firstState)
149            .backgroundColor('#007dFF')
150            .onClick(() => {
151              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
152            })
153        }.itemStyle()
154      }
155      .nextLabel('Next')
156      .status(this.firstState)
157      // 第二个步骤页
158      StepperItem() {
159        Column() {
160          Text('Page Two')
161            .itemTextStyle()
162          Button('change status:' + this.secondState)
163            .backgroundColor('#007dFF')
164            .onClick(() => {
165              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
166            })
167        }.itemStyle()
168      }
169      .nextLabel('Next')
170      .prevLabel('Previous')
171      .status(this.secondState)
172      // 第三个步骤页
173      StepperItem() {
174        Column() {
175          Text('Page Three')
176            .itemTextStyle()
177          Button('change status:' + this.thirdState)
178            .backgroundColor('#007dFF')
179            .onClick(() => {
180              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
181            })
182        }.itemStyle()
183      }
184      .status(this.thirdState)
185      // 第四个步骤页
186      StepperItem() {
187        Column() {
188          Text('Page Four')
189            .itemTextStyle()
190        }.itemStyle()
191      }
192    }
193    .backgroundColor('#F1F3F5')
194    .onFinish(() => {
195      // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
196      console.info('onFinish')
197    })
198    .onSkip(() => {
199      // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
200      console.info('onSkip')
201    })
202    .onChange((prevIndex?: number, index?: number) => {
203      if(index){
204        this.currentIndex = index
205      }
206    })
207  }
208}
209```
210
211
212![stepper](figures/stepper.gif)
213
214