Stepper

                步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。

        一、子组件

                其子组件只能包含StepperItem

        二、接口

                Stepper(value?: { index?: number })

                创建步骤导航器组件。

参数名	类型	必填	说明
value	{ index?: number }	否	设置步骤导航器当前显示StepperItem的索引值。 默认值：0

        三、事件

                1、onFinish

                        onFinish(callback: () => void)

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

参数名	类型	必填	说明
callback	() => void	是	步骤导航器最后一个StepperItem的nextLabel被点击时，并且ItemState属性为Normal时，触发该回调。

                2、onSkip

                        onSkip(callback: () => void)

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

参数名	类型	必填	说明
callback	() => void	是	当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。

                3、onChange

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

                        点击当前StepperItem的prevLabel进行步骤切换时触发该回调；或点击当前StepperItem的nextLabel，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。

参数名	类型	必填	说明
prevIndex	number	是	切换前的步骤页索引值。 取值范围：[0, +∞)
index	number	是	切换后的步骤页（前一页或者下一页）索引值。 取值范围：[0, +∞)

                4、onNext

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

                        点击StepperItem的nextLabel切换下一步骤时，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。

参数名	类型	必填	说明
index	number	是	当前步骤页索引值。
pendingIndex	number	是	下一步骤页索引值。

                5、onPrevious

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

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

参数名	类型	必填	说明
index	number	是	当前步骤页索引值。
pendingIndex	number	是	上一步骤页索引值。

StepperItem

        一、属性

                prevLabel

                        prevLabel(value: string)

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

参数名	类型	必填	说明
value	string	是	左侧文本按钮内容。字符串超长时，先缩小再换行（2行）最后截断。

                nextLabel

                        nextLabel(value: string)

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

参数名	类型	必填	说明
value	string	是	右侧文本按钮内容。字符串超长时，先缩小再换行（2行）最后截断。

                status

                        status(value?: ItemState)

                        设置步骤导航器nextLabel的显示状态。

参数名	类型	必填	说明
value	ItemState	否	步骤导航器nextLabel的显示状态。 默认值：ItemState.Normal

        二、ItemState枚举说明

                步骤导航器nextLabel的显示状态。

名称	说明
Normal	正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。
Disabled	不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。
Waiting	等待状态，右侧文本按钮不显示，显示等待进度条，不可点击进入下一个StepperItem。
Skip	跳过状态，右侧文本按钮默认显示“跳过”，此时可在Stepper的onSkip回调中自定义相关逻辑。

示例

// xxx.ets
@Styles function itemStyle () {
  .width(336)
  .height(621)
  .margin({ top: 48, left: 12 })
  .borderRadius(24)
  .backgroundColor('#FFFFFF')
}

@Extend(Text) function itemTextStyle () {
  .fontColor('#182431')
  .fontSize(36)
  .fontWeight(500)
  .opacity(0.4)
  .margin({ top: 82, bottom: 40 })
}

@Entry
@Component
struct StepperExample {
  @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')
            .itemTextStyle()
          Button('change status:' + this.firstState)
            .backgroundColor('#007dFF')
            .onClick(() => {
              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip;
            })
        }.itemStyle()
      }
      .nextLabel('Next')
      .status(this.firstState)
      // 第二个步骤页
      StepperItem() {
        Column() {
          Text('Page Two')
            .itemTextStyle()
          Button('change status:' + this.secondState)
            .backgroundColor('#007dFF')
            .onClick(() => {
              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled;
            })
        }.itemStyle()
      }
      .nextLabel('Next')
      .prevLabel('Previous')
      .status(this.secondState)
      // 第三个步骤页
      StepperItem() {
        Column() {
          Text('Page Three')
            .itemTextStyle()
          Button('change status:' + this.thirdState)
            .backgroundColor('#007dFF')
            .onClick(() => {
              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting;
            })
        }.itemStyle()
      }
      .status(this.thirdState)
      // 第四个步骤页
      StepperItem() {
        Column() {
          Text('Page Four')
            .itemTextStyle()
        }.itemStyle()
      }
    }
    .backgroundColor('#F1F3F5')
    .onFinish(() => {
      // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
      console.info('onFinish');
    })
    .onSkip(() => {
      // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
      console.info('onSkip');
    })
    .onChange((prevIndex?: number, index?: number) => {
      if(index){
        this.currentIndex = index;
      }
    })
  }
}