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