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;

   })

 }

示例效果:

相关文章
|
5月前
|
数据安全/隐私保护
HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
41 0
|
5月前
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
24 0
|
5月前
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
28 0
|
5月前
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
41 0
|
5月前
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
30 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
36 0
|
7天前
|
Android开发
鸿蒙开发:自定义一个简单的标题栏
本身就是一个很简单的标题栏组件,没有什么过多的技术含量,有一点需要注意,当使用沉浸式的时候,注意标题栏的位置,需要避让状态栏。
鸿蒙开发:自定义一个简单的标题栏
|
7天前
|
API
鸿蒙开发:切换至基于rcp的网络请求
本文的内容主要是把之前基于http封装的库,修改为当前的Remote Communication Kit(远场通信服务),无非就是通信的方式变了,其他都大差不差。
鸿蒙开发:切换至基于rcp的网络请求
|
12天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
43 8
|
12天前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
33 7
下一篇
无影云桌面