Stepper

步驟導航器組件，適用于引導用戶按照步驟完成任務的導航場景。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

僅能包含子組件[StepperItem]。

接口

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

參數:

參數名	參數類型	必填	參數描述
index	number	否	設置步驟導航器當前顯示StepperItem的索引值。默認值：0 從API version 10開始，該參數支持[$$]雙向綁定變量。

屬性

無

事件

名稱	描述
onFinish(callback: () => void)	步驟導航器最后一個StepperItem的nextLabel被點擊時，并且ItemState屬性為Normal時，觸發該回調。
onSkip(callback: () => void)	當前顯示的StepperItem狀態為ItemState.Skip時，nextLabel被點擊時觸發該回調。
onChange(callback: (prevIndex?: number, index?: number) => void)	點擊當前StepperItem的prevLabel進行步驟切換時觸發該回調；或點擊當前StepperItem的nextLabel，當前頁面不為步驟導航器最后一個StepperItem且ItemState屬性為Normal時，觸發該回調。 - prevIndex：切換前的步驟頁索引值。 - index：切換后的步驟頁（前一頁或者下一頁）索引值。
onNext(callback: (index?: number, pendingIndex?: number) => void)	點擊StepperItem的nextLabel切換下一步驟時，當前頁面不為步驟導航器最后一個StepperItem且ItemState屬性為Normal時，觸發該回調。 - index：當前步驟頁索引值。 - pendingIndex：下一步驟頁索引值。
onPrevious(callback: (index?: number, pendingIndex?: number) => void)	點擊StepperItem的prevLabel切換上一步驟時觸發該回調。 - index：當前步驟頁索引值。 - pendingIndex：上一步驟頁索引值。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151344.png

示例

// 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
      }
    })
  }
}