一、组件介绍

StepperItem组件是HarmonyOS NEXT中一个用于构建步骤导航的重要组件，它主要用于展示多步骤操作的进度和状态。通过StepperItem，开发者可以创建清晰的步骤指示器，帮助用户了解当前所处的步骤位置以及整个流程的进度。

二、基本概念

1. 核心特性

• 步骤状态显示：可以显示已完成、当前和待完成的步骤状态
• 自定义样式：支持自定义步骤项的外观和布局
• 进度指示：通过视觉元素清晰展示整体进度
• 交互响应：支持点击切换和状态变更

三、组件用法

1. 基础用法

@Entry
@Component
struct StepperExample {
  build() {
    Stepper() {
      StepperItem() {
        Text('步骤1').fontSize(16)
      }.status(ItemState.COMPLETED)

      StepperItem() {
        Text('步骤2').fontSize(16)
      }.status(ItemState.CURRENT)

      StepperItem() {
        Text('步骤3').fontSize(16)
      }.status(ItemState.WAITING)
    }
  }
}

2. 属性说明

StepperItem主要属性：

• status：设置步骤项状态

  • ItemState.COMPLETED：已完成状态
  • ItemState.CURRENT：当前状态
  • ItemState.WAITING：等待状态

• content：步骤内容区域的构建器

• label：步骤标签文本

3. 样式定制

@Entry
@Component
struct CustomStepperExample {
  build() {
    Stepper() {
      StepperItem() {
        Column() {
          Text('个人信息').fontSize(16).fontWeight(FontWeight.Bold)
          Text('填写基本资料').fontSize(14).opacity(0.6)
        }
      }
      .status(ItemState.COMPLETED)
      .backgroundColor('#F5F5F5')
      .borderRadius(8)
      .margin({ top: 8 })
    }
    .padding(16)
  }
}

四、进阶特性

1. 状态管理

@Entry
@Component
struct StepperStateExample {
  @State currentStep: number = 0
  steps: string[] = ['填写信息', '验证身份', '完成注册']

  build() {
    Column() {
      Stepper() {
        ForEach(this.steps, (step: string, index: number) => {
          StepperItem() {
            Text(step)
              .fontSize(16)
          }
          .status(index < this.currentStep ? ItemState.COMPLETED :
                 index === this.currentStep ? ItemState.CURRENT : ItemState.WAITING)
        })
      }

      Button('下一步')
        .onClick(() => {
          if (this.currentStep < this.steps.length - 1) {
            this.currentStep++
          }
        })
    }
  }
}

2. 自定义指示器

@Entry
@Component
struct CustomIndicatorExample {
  build() {
    Stepper() {
      StepperItem() {
        Column() {
          Circle({ width: 24, height: 24 })
            .fill(Color.Blue)
          Text('Step 1').fontSize(14)
        }
      }.status(ItemState.COMPLETED)
    }
  }
}

五、总结

本文详细介绍了 HarmonyOS NEXT 中的 StepperItem 组件及其使用方法。StepperItem 组件是构建步骤导航的重要组件，通过它可以清晰地展示多步骤操作的进度和状态。通过基础用法、属性说明、样式定制和进阶特性，开发者可以灵活实现多种分步操作的界面。这种设计不仅提升了用户体验，还增强了界面的交互性和视觉效果，适用于各种需要分步引导的场景。