步骤导航器组件

2024-01-22 17:27 更新

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

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

仅能包含子组件StepperItem

接口

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

参数:

参数名参数类型必填参数描述
indexnumber

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

默认值:0

属性

事件

名称描述
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:上一步骤页索引值。

示例

  1. // xxx.ets
  2. @Styles function itemStyle () {
  3. .width(336)
  4. .height(621)
  5. .margin({ top: 48, left: 12 })
  6. .borderRadius(24)
  7. .backgroundColor('#FFFFFF')
  8. }
  9. @Extend(Text) function itemTextStyle () {
  10. .fontColor('#182431')
  11. .fontSize(36)
  12. .fontWeight(500)
  13. .opacity(0.4)
  14. .margin({ top: 82, bottom: 40 })
  15. }
  16. @Entry
  17. @Component
  18. struct StepperExample {
  19. @State currentIndex: number = 0
  20. @State firstState: ItemState = ItemState.Normal
  21. @State secondState: ItemState = ItemState.Normal
  22. @State thirdState: ItemState = ItemState.Normal
  23. build() {
  24. Stepper({
  25. index: this.currentIndex
  26. }) {
  27. // 第一个步骤页
  28. StepperItem() {
  29. Column() {
  30. Text('Page One')
  31. .itemTextStyle()
  32. Button('change status:' + this.firstState)
  33. .backgroundColor('#007dFF')
  34. .onClick(() => {
  35. this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
  36. })
  37. }.itemStyle()
  38. }
  39. .nextLabel('Next')
  40. .status(this.firstState)
  41. // 第二个步骤页
  42. StepperItem() {
  43. Column() {
  44. Text('Page Two')
  45. .itemTextStyle()
  46. Button('change status:' + this.secondState)
  47. .backgroundColor('#007dFF')
  48. .onClick(() => {
  49. this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
  50. })
  51. }.itemStyle()
  52. }
  53. .nextLabel('Next')
  54. .prevLabel('Previous')
  55. .status(this.secondState)
  56. // 第三个步骤页
  57. StepperItem() {
  58. Column() {
  59. Text('Page Three')
  60. .itemTextStyle()
  61. Button('change status:' + this.thirdState)
  62. .backgroundColor('#007dFF')
  63. .onClick(() => {
  64. this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
  65. })
  66. }.itemStyle()
  67. }
  68. .status(this.thirdState)
  69. // 第四个步骤页
  70. StepperItem() {
  71. Column() {
  72. Text('Page Four')
  73. .itemTextStyle()
  74. }.itemStyle()
  75. }
  76. }
  77. .backgroundColor('#F1F3F5')
  78. .onFinish(() => {
  79. // 此处可处理点击最后一页的Finish时的逻辑,例如路由跳转等
  80. console.info('onFinish')
  81. })
  82. .onSkip(() => {
  83. // 此处可处理点击跳过时的逻辑,例如动态修改Stepper的index值使其跳转到某一步骤页等
  84. console.info('onSkip')
  85. })
  86. .onChange((prevIndex: number, index: number) => {
  87. this.currentIndex = index
  88. })
  89. }
  90. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号