#鸿蒙通关秘籍#如何在HarmonyOS Next中自定义Stepper组件？

使用Swiper组件可以有效地实现自定义Stepper。在项目中，通过Swiper的Item来承载每个步骤的内容，并使用SwiperController控制步骤切换，而非使用Swiper的原生滑动功能，允许自定义按钮的样式和位置。防止滑动切换后使用代码导航，确保每个步骤的数据填写完整，才能继续下一步。以下是实现代码：

// HeaderView用于显示页面标题和返回按钮，内容固定
HeaderView({ titleArray: this.pageTitleArray, currentIndex: this.currentIndex })

// 使用Swiper承载步骤内容，Item禁用掉滑动切换，使用Controller切换
Swiper(this.controller) {
  UserNoticeView()
  CategoryView()
  TableView()
}
.layoutWeight(1)
.duration(0)
.cachedCount(1)
.disableSwipe(true)
.backgroundColor(Color.Transparent)
.index($$this.currentIndex)
.width('100%')
.loop(false)
.autoPlay(false)
.indicator(false)

每个步骤页面应该根据其特殊性进行数据校验：

@Component
export struct CategoryView {
  submitInfo: SubmitInfoWrapper | undefined = undefined;

  build() {
    Column() {
      FooterView({
        nextCb: () => {
          let verified: boolean = this.submitInfo?.category !== undefined;
          if (!verified) {
            promptAction.showToast({ message: $r("app.string.stepper_info_not_filled") });
          }
          return verified;
        }
      })
    }
  }
}