HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】

简介: HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】

摘要

作者:红目香薰

团队:坚果派

团队介绍:坚果派由坚果创建,团队拥有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;

   })

 }

示例效果:

相关文章
|
7月前
|
数据安全/隐私保护
HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
56 0
|
7月前
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
44 0
|
7月前
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
45 0
|
7月前
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
50 0
|
7月前
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
43 0
|
7月前
|
索引
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
45 0
|
18天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
84 47
Harmony OS开发-ArkTS语言速成二
|
20天前
|
API 索引
鸿蒙开发:实现一个超简单的网格拖拽
实现拖拽,最重要的三个方法就是,打开编辑状态editMode,实现onItemDragStart和onItemDrop,设置拖拽移动动画和交换数据,如果想到开启补位动画,还需要实现supportAnimation方法。
75 13
鸿蒙开发:实现一个超简单的网格拖拽
|
19天前
|
索引 API
鸿蒙开发:自定义一个股票代码选择键盘
金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。
鸿蒙开发:自定义一个股票代码选择键盘
|
19天前
|
API
鸿蒙开发:自定义一个英文键盘
实现方式呢,有很多种,目前采用了比较简单的一种,如果大家采用网格Grid组件实现方式,也是可以的,但是需要考虑每行的边距以及数据,还有最后两行的格子占位问题。
鸿蒙开发:自定义一个英文键盘

热门文章

最新文章