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

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

摘要

作者:红目香薰

团队:坚果派

团队介绍:坚果派由坚果创建,团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

StepperItem

用作Stepper组件的页面子组件。

子组件

支持单个子组件。

接口

StepperItem()

属性

参数名

参数类型

默认值

参数描述

prevLabel

string

-

当步骤导航器大于一页,除第一页默认值都为"返回"。

nextLabel

string

-

步骤导航器大于一页时,最后一页默认值为"开始",其余页默认值为"下一步"。

status

ItemState

ItemState.Normal

步骤导航器元素的状态。

ItemState枚举说明

名称

描述

Normal

正常状态,右侧文本按钮正常显示,可点击进入下一个StepperItem。

Disabled

不可用状态,右侧文本按钮灰度显示,不可点击进入下一个StepperItem。

Waiting

等待状态,右侧文本按钮不显示,使用等待进度条,不可点击进入下一个StepperItem。

Skip

跳过状态,表示跳过当前步骤, 进入下一个StepperItem。

示例代码

 

@Entry

@Component

struct Index {

 @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——【坚果派-红目香薰】
37 0
|
5月前
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
22 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
32 0
|
5月前
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
41 0
|
5月前
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
29 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
35 0
|
1天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
18 8
|
1天前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
18 7
|
1天前
|
监控 开发者
鸿蒙next版开发:使用HiDebug获取调试信息(ArkTS)
在HarmonyOS 5.0中,HiDebug是一个强大的应用调试工具,可帮助开发者获取系统的CPU使用率、内存信息等关键性能数据。本文详细介绍了如何在ArkTS中使用HiDebug,并提供了示例代码,帮助开发者进行性能分析和问题诊断。
16 7
|
1天前
|
前端开发 API
鸿蒙next版开发:相机开发-预览(ArkTS)
在HarmonyOS 5.0中,使用ArkTS进行相机预览是核心功能之一。本文详细介绍了如何使用ArkTS实现相机预览,包括导入相机接口、创建Surface、获取相机输出能力、创建会话并开始预览,以及监听预览输出状态等步骤,并提供了代码示例。通过本文,读者可以掌握在HarmonyOS 5.0中使用ArkTS进行相机预览的基本方法。
16 6

热门文章

最新文章