一、案例介绍

本案例将展示SpanStepper组件的基础用法和数据绑定功能，通过一个简单的注册流程来演示如何使用SpanStepper组件实现分步操作界面。

二、代码实现

@Entry
@Component
struct RegistrationStepperExample {
  @State currentStep: number = 0
  @State formData: {[key: string]: string} = {
    username: '',
    email: '',
    phone: ''
  }

  build() {
    Column() {
      // 步骤指示器
      SpanStepper() {
        StepperItem() {
          Column() {
            Text('个人信息').fontSize(16).fontWeight(FontWeight.Bold)
            Text('设置用户名').fontSize(14).opacity(0.6)
          }
        }
        .status(this.currentStep === 0 ? ItemState.CURRENT :
               this.currentStep > 0 ? ItemState.COMPLETED : ItemState.WAITING)

        StepperItem() {
          Column() {
            Text('联系方式').fontSize(16).fontWeight(FontWeight.Bold)
            Text('填写邮箱和手机').fontSize(14).opacity(0.6)
          }
        }
        .status(this.currentStep === 1 ? ItemState.CURRENT :
               this.currentStep > 1 ? ItemState.COMPLETED : ItemState.WAITING)

        StepperItem() {
          Column() {
            Text('完成注册').fontSize(16).fontWeight(FontWeight.Bold)
            Text('确认信息').fontSize(14).opacity(0.6)
          }
        }
        .status(this.currentStep === 2 ? ItemState.CURRENT : ItemState.WAITING)
      }
      .width('100%')
      .padding(16)

      // 表单内容
      Column() {
        if (this.currentStep === 0) {
          TextInput({ placeholder: '请输入用户名' })
            .width('100%')
            .height(48)
            .margin({ top: 16 })
            .onChange((value: string) => {
              this.formData.username = value
            })
        } else if (this.currentStep === 1) {
          TextInput({ placeholder: '请输入邮箱' })
            .width('100%')
            .height(48)
            .margin({ top: 16 })
            .onChange((value: string) => {
              this.formData.email = value
            })

          TextInput({ placeholder: '请输入手机号' })
            .width('100%')
            .height(48)
            .margin({ top: 16 })
            .onChange((value: string) => {
              this.formData.phone = value
            })
        } else {
          Column() {
            Text('注册信息确认').fontSize(20).fontWeight(FontWeight.Bold)
            Text(`用户名：${this.formData.username}`).margin({ top: 16 })
            Text(`邮箱：${this.formData.email}`).margin({ top: 8 })
            Text(`手机号：${this.formData.phone}`).margin({ top: 8 })
          }.width('100%').padding(16)
        }
      }.width('100%').padding({ left: 16, right: 16 })

      // 操作按钮
      Row() {
        Button('上一步')
          .enabled(this.currentStep > 0)
          .opacity(this.currentStep > 0 ? 1 : 0.5)
          .onClick(() => {
            if (this.currentStep > 0) {
              this.currentStep--
            }
          })

        Button(this.currentStep === 2 ? '完成' : '下一步')
          .enabled(this.currentStep < 3)
          .onClick(() => {
            if (this.currentStep < 2) {
              this.currentStep++
            } else {
              // 在实际应用中，这里可以处理表单提交逻辑
              console.info('注册完成')
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .padding(16)
      .margin({ top: 20 })
    }
  }
}

三、代码解析

1. 状态定义

@State currentStep: number = 0  // 当前步骤索引
@State formData: {[key: string]: string} = {  // 表单数据对象
  username: '',
  email: '',
  phone: ''
}

• 使用@State装饰器定义组件的状态变量
• currentStep用于控制当前显示的步骤
• formData用于存储表单数据

2. 步骤状态控制

.status(this.currentStep === 0 ? ItemState.CURRENT :
       this.currentStep > 0 ? ItemState.COMPLETED : ItemState.WAITING)

• 通过条件表达式动态设置每个步骤的状态
• 当前步骤显示为CURRENT状态
• 已完成步骤显示为COMPLETED状态
• 未开始步骤显示为WAITING状态

3. 表单内容切换

if (this.currentStep === 0) {
  // 第一步：用户名输入
} else if (this.currentStep === 1) {
  // 第二步：联系方式输入
} else {
  // 第三步：信息确认
}

• 根据currentStep的值条件渲染不同的表单内容
• 使用TextInput组件收集用户输入
• 通过onChange事件更新formData中的数据

4. 导航控制

Button('上一步')
  .enabled(this.currentStep > 0)
  .opacity(this.currentStep > 0 ? 1 : 0.5)
  .onClick(() => {
    if (this.currentStep > 0) {
      this.currentStep--
    }
  })

• 通过enabled属性控制按钮是否可点击
• 使用opacity属性提供视觉反馈
• onClick事件处理器中更新currentStep值

四、、总结

通过本案例，我们学了：

1. SpanStepper组件的基础用法
2. 如何实现步骤状态的动态控制
3. 表单数据的收集和管理
4. 分步操作的导航控制

这些知识点将帮助你在实际项目中更好地使用SpanStepper组件，创建清晰的分步操作界面。