效果图

image.png

counter步进器全部代码

import { AppBarWidget } from './AppBarWidget';
@Entry
@Component
struct CounterPage {
  count: number = 2;
  @State value: number = 0

  build() {
    Column() {
      AppBarWidget({title:'CounterPage'})
      //自定义组件
      CounterProduct({
        count: this.count,
        onNumberChange: (num: number) => {
          console.info(num.toString());
        }
      })
      //原声组件
      Counter() {
        Text(this.value.toString())
      }.margin(20)
      .onInc(() => {
        this.value++
      })
      .onDec(() => {
        this.value--
      })

    }
  }
}


@Component
export struct CounterProduct {
  @State @Watch('onChange') quantityCount: number = 1;
  @State disabledMin: boolean = false;
  @State disabledMax: boolean = false;
  private count: number = 1;
  private counterMin: number = 1;
  private counterMax: number = 8;
  private onNumberChange: (n: number) => void = () => {};

  aboutToAppear() {
    this.quantityCount = this.count;
    if (this.quantityCount <= this.counterMin) {
      this.disabledMin = true;
    }
    if (this.quantityCount >= this.counterMax) {
      this.disabledMax = true;
    }
  }

  onChange() {
    this.disabledMin = (this.quantityCount <= this.counterMin);
    this.disabledMax = (this.quantityCount >= this.counterMax);
  }

  build() {
    Row() {
      Image(this.disabledMin ? $r('app.media.icon_shopping_reduce_selected') : $r('app.media.icon_shopping_reduce_select'))
        .width(32)
        .height(24)
        .onClick(() => {
          if (this.disabledMin) {
            return;
          }
          this.quantityCount = Math.max(this.quantityCount - 1, this.counterMin);
          this.onNumberChange(this.quantityCount);
        }).focusOnTouch(true)
      TextInput({text:this.quantityCount.toString(),})
        .onChange((value)=>{
          if (value) {
            this.quantityCount = Number.parseInt(value)
          }
        })
        .onEditChange((value)=>{
          if (value) {
            console.info('end')
          }
        })
        .fontColor(Color.Black)
        .fontSize(17)
        .width(80)
        .height(33)
        .type(InputType.Number)
        .borderRadius(0)
        .textAlign(TextAlign.Center)
        .padding(0)

      Image(this.disabledMax ? $r('app.media.icon_shopping_add_selected') : $r('app.media.icon_shopping_add_select'))
        .width(32)
        .height(24)
        .onClick(() => {
          if (this.disabledMax) {
            return;
          }
          this.quantityCount = Math.min(this.quantityCount + 1, this.counterMax);
          this.onNumberChange(this.quantityCount);
        }).focusOnTouch(true)
    }
    .height(24)
  }
}

ps:
1、BS开头的API是为了方便开发和维护，对鸿蒙UI做了一层简单的封装，并且会陆续进行更新.
2、基于API Version9版本.
3、看到文章觉得还OK麻烦留个赞👍谢谢啦～