HarmonyOS 5.0.0 或以上：实现一个简易的步进器组件（支持最大最小值与禁用）-CSDN博客

本文链接：https://blog.csdn.net/2501_92048894/article/details/148062493

📌 场景介绍

步进器（Stepper）常用于数量调整、设置值选择等场景，特点是：

点击 + / - 调整值
支持最大值、最小值限制
支持禁用态

🧱 目录结构

/entry/src/main/ets
  ├── common/components/
  │   └── Stepper.ets           // 步进器组件
  ├── pages/
  │   └── StepperDemo.ets       // 示例页面

🧩 Stepper.ets 步进器组件

@Component
export struct Stepper {
  @Prop min: number = 0
  @Prop max: number = 10
  @Prop step: number = 1
  @Prop modelValue: number = 0
  @Prop onChange: (val: number) => void = () => {}

  build() {
    Row() {
      // 减
      Button("-")
        .enabled(this.modelValue > this.min)
        .onClick(() => {
          const val = Math.max(this.min, this.modelValue - this.step)
          this.onChange(val)
        })

      Text(`${this.modelValue}`)
        .width(50)
        .textAlign(TextAlign.Center)
        .fontSize(18)
        .margin({ left: 10, right: 10 })

      // 加
      Button("+")
        .enabled(this.modelValue < this.max)
        .onClick(() => {
          const val = Math.min(this.max, this.modelValue + this.step)
          this.onChange(val)
        })
    }
    .height(50)
    .padding(5)
    .backgroundColor('#f6f6f6')
    .borderRadius(8)
    .alignItems(VerticalAlign.Center)
  }
}

🧩 StepperDemo.ets 示例页面

@Entry
@Component
struct StepperDemo {
  @State value: number = 2

  build() {
    Column() {
      Text(`当前值：${this.value}`).fontSize(20).margin({ bottom: 20 })

      Stepper({
        min: 1,
        max: 5,
        step: 1,
        modelValue: this.value,
        onChange: (val: number) => {
          this.value = val
        }
      })
    }
    .padding(30)
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}