步骤导航器

Stepper

步骤导航器组件,用于 引导用户按照步骤完成任务得导航场景

注意

1. 他只能包含子组件 StepperItem

2. 他不能用 Foreach 循环 否则下面的下一页 上一页出不来

参数

• 设置步骤导航器当前显示 StepperItem 的索引值

  Stepper({
            index: this.currentIndex
        }) {}

属性

StepperItem 属性(无事件)

• prevLabel

设置左侧文本按钮内容，第一页没有左侧文本按钮，当步骤导航器大于一页时，除第一页外默认值都为“返回”。

• nextLabel

设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。

• status

设置步骤导航器 nextLabel 的显示状态。 例如 ItemState.Normal

事件

onFinish

onFinish(callback: () => void)

步骤导航器最后一个 StepperItem 的 nextLabel 被点击时，并且 ItemState 属性为 Normal 时，触发该回调。

onSkip

onFinish(callback: () => void)

当前显示的 StepperItem 状态为 ItemState.Skip 时，nextLabel 被点击时触发该回调。

onChange

onChange(callback: (index: number) => void)

步骤导航器当前显示的 StepperItem 索引值发生变化时触发该回调。

onNext

点击 StepperItem 的 nextLabel 切换下一步骤时

onNext(callback: (index: number, pendingIndex: number) => void)

• index:当前步骤页的索引值

• pendingIndex:下一步骤页的索引值

onPrevious

点击 StepperItem 的 prevLabel 切换上一步骤时触发该回调。

onPrevious(callback: (index: number, pendingIndex: number) => void)

示例

@Entry
@Component
struct Index3 {
    @State list: string[] = ["1", "2", "3", "4"]
    @State currentIndex: number = 3;

    @Styles
    CommonStyle(){
        .width(300)
        .backgroundColor(Color.Blue)
        .height(500)
        .borderRadius(
            {
                topLeft: 12,
                topRight: 12,
                bottomLeft: 12,
                bottomRight: 12
            }
        )


    }

    build() {
        Stepper({
            index: this.currentIndex
        }) {

            StepperItem() {
                Column() {
                    Text("第一页")
                        .fontSize(24)
                        .fontColor(Color.Yellow)
                        .margin({
                            top: 150
                        })
                }.CommonStyle()
            }
            .status(ItemState.Normal)

            StepperItem() {
                Column() {
                    Text("第二页")
                        .fontSize(24)
                        .fontColor(Color.Yellow)
                        .margin({
                            top: 150
                        })
                }.CommonStyle()
            }
            .nextLabel("下一个")
            .prevLabel("上一个")
            .status(ItemState.Normal)

            StepperItem() {
                Column() {
                    Text("第三页")
                        .fontSize(24)
                        .fontColor(Color.Yellow)
                        .margin({
                            top: 150
                        })
                }.CommonStyle()
            }
            .nextLabel("下一个")
            .prevLabel("上一个")
            .status(ItemState.Normal)

        }
        .onFinish(() => {
            // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
            console.info('onFinish');
        })
        .onSkip(() => {
            // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
            console.info('onSkip');
        })
        .onChange((prevIndex?: number, index?: number) => {
            if (index) {
                this.currentIndex = index;
            }
        })
        // 点击下一个
        .onNext((index: number, pendingIndex: number) => {
            console.info("当前索引页" + index.toString())
            console.info("下一页步骤索引页" + pendingIndex.toString())
        })

        // 点击上一个
        .onPrevious((index: number, pendingIndex: number) => {
            console.info("当前页索引" + index.toString())
            console.info("上一页步骤索引" + pendingIndex.toString())
        })

    }
}