第九节HarmonyOS 常用基础组件30-Stepper

yyxhzdm

535人浏览 · 2024-03-21 11:09:06

yyxhzdm · 2024-03-21 11:09:06 发布

1、描述

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

2、接口

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

3、参数

参数名	参数类型	必填	描述
index	number	否	设置步骤导航器当前显示StepperItem的索引值。默认值：0。

4、StepperItem属性

参数名	参数类型	参数描述
prevLabel	string	设置左侧文本按钮内容，第一页没有左侧文本按钮，当步骤导航器大于一页时，除第一页默认值都为“返回”。
nextLabel	string	设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。
status	ItemState	步骤导航器nextLabel的显示状态。默认值：ItemState.Normal。

ItemState枚举说明：

名称	描述
Normal	正常状态，右侧文本按钮正常显示，可以点击进入下一个StepperItem。
Disabled	不可用状态，右侧文本按钮灰度显示，不可点击进入到下一个StepperItem。
Waiting	等待状态，右侧文本按钮不显示，显示等待进度条，不可点击进入到下一个StepperItem。
Skip	跳过状态，右侧文本按钮默认显示“跳过”，此时可在Stepper的OnSkip()回调中自定义相关逻辑。

5、事件

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

6、示例

// xxx.ets
import router from '@ohos.router'

@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 StepperPage {
  @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(() => {
            })
        }.itemStyle()
      }
      .nextLabel('Next')
      .status(this.firstState)

      // 第二个步骤页
      StepperItem() {
        Column() {
          Text('Page Two')
            .itemTextStyle()
          Button('change status:' + this.secondState)
            .backgroundColor('#007dFF')
            .onClick(() => {
            })
        }.itemStyle()
      }
      .nextLabel('Next')
      .prevLabel('Previous')
      .status(this.secondState)

      // 第三个步骤页
      StepperItem() {
        Column() {
          Text('Page Three')
            .itemTextStyle()
          Button('change status:' + this.thirdState)
            .backgroundColor('#007dFF')
            .onClick(() => {
            })
        }.itemStyle()
      }
      .nextLabel('Next')
      .prevLabel('Previous')
      .status(this.thirdState)

      // 第四个步骤页
      StepperItem() {
        Column() {
          Text('Page Four')
            .itemTextStyle()
        }.itemStyle()
      }
      .nextLabel('开始')
      .prevLabel('Previous')
    }
    .backgroundColor('#F1F3F5')
    .onFinish(() => {
      // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
      console.info('onFinish')

      // 点击跳转到Stepper组件说明文档页面
      router.pushUrl({
        url: "pages/baseComponent/stepper/StepperDesc",
      })
    })
    .onSkip(() => {
      // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
      console.info('onSkip')
    })
    .onChange((prevIndex: number, index: number) => {
      this.currentIndex = index
    })
  }
}

7、效果图

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

2026 HUAWEI HiCar 认证新变化，车载设备研发必看要

HarmonyOS开发者社区

ArkUI 状态管理传值选型指南：@Prop、@Link、@ObjectLink、@Track 到底怎么选

在鸿蒙开发者社区里，有两类问题几乎是"日经贴"级别的高频提问。第一类是"自定义组件之间怎么传值，@Prop、@Link、@ObjectLink 到底该用哪个"；第二类是"我给 @State 装饰的 ArrayList 调了 add，数据明明加进去了，console.info 打印长度也变了，为什么列表 UI 一动不动"。

HarmonyOS开发者社区

ArkTS 并发编程实战：TaskPool 与 Worker 里如何安全地更新 UI

「子线程不能直接操作 UI」——这句话在 HarmonyOS 的技术社区里出现的频率，大概仅次于「@State 变化会触发刷新」。它是一句正确的结论，但在真实项目里，它常常被当成一个「知道了就能写对」的知识点。事实恰好相反：这句结论只解决了「要不要回主线程」的判断，完全没有回答「怎么回、回什么、回来之后怎么收尾」这三件真正会让代码写崩的事。