摘要
作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。
Stepper
步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。
子组件
仅能包含子组件StepperItem。
接口
Stepper(value?: { index?: number })
参数：
参数名 |
必填 |
默认值 |
参数描述 |
|
index |
number |
否 |
0 |
设置步骤导航器显示第几个StepperItem。 |
属性
无
事件
名称 |
描述 |
onFinish(callback: () => void) |
步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调 。 |
onSkip(callback: () => void) |
当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
onChange(callback: (prevIndex?: number, index?: number) => void) |
点击左边或者右边文本按钮进行步骤切换时触发该事件。 - prevIndex：切换前的步骤页索引值。 - index：切换后的步骤页（前一页或者下一页）索引值。 |
onNext(callback: (index?: number, pendingIndex?: number) => void) |
点击切换下一步骤时触发该事件。 - index：当前步骤页索引值。 - pendingIndex：下一步骤页索引值。 |
onPrevious(callback: (index?: number, pendingIndex?: number) => void) |
点击切换上一步骤时触发该事件。 - index：当前步骤页索引值。 - pendingIndex：上一步骤页索引值。 |
示例代码
@State currentIndex: number = 0;
@State firstState: ItemState = ItemState.Normal;
@State secondState: ItemState = ItemState.Normal;
@State thirdState: ItemState = ItemState.Normal;
build() {
Stepper({
index: this.currentIndex
}) {
// 第一个步骤页
StepperItem() {
Column() {
Text('Page One')
.fontSize(35)
.fontColor(Color.Blue)
.lineHeight(50)
.margin({ top: 250, bottom: 50 })
Button('change status:' + this.firstState)
.onClick(() => {
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip;
})
}.width('100%')
}
.nextLabel('Next')
.status(this.firstState)
// 第二个步骤页
StepperItem() {
Column() {
Text('Page Two')
.fontSize(35)
.fontColor(Color.Blue)
.lineHeight(50)
.margin({ top: 250, bottom: 50 })
Button('change status:' + this.secondState)
.onClick(() => {
this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled;
})
}.width('100%')
}
.nextLabel('Next')
.prevLabel('Previous')
.status(this.secondState)
// 第三个步骤页
StepperItem() {
Column() {
Text('Page Three')
.fontSize(35)
.fontColor(Color.Blue)
.lineHeight(50)
.margin({ top: 250, bottom: 50 })
Button('change status:' + this.thirdState)
.onClick(() => {
this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting;
})
}.width('100%')
}
.status(this.thirdState)
// 第四个步骤页
StepperItem() {
Text('Page four')
.fontSize(35)
.fontColor(Color.Blue)
.width('100%')
.textAlign(TextAlign.Center)
.lineHeight(50)
.margin({ top: 250 })
}
.nextLabel('Finish')
}
.onFinish(() => {
// 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
console.info('onFinish');
})
.onSkip(() => {
// 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
console.info('onSkip');
})
.onChange((prevIndex: number, index: number) => {
this.currentIndex = index;
})
}
示例效果：
