【学习笔记】HarmonyOS 鸿蒙Next 自定义一个数字输入组件TextInputNumber

预览样式


@ComponentV2
export default struct TextInputNumber {
  @Param value: number = 10
  @Event $value: (val: number) => void = (val: number) => {
  }
  @Event onChange: (val: number) => void = (val: number) => {
  }
  @Param min: number = 0
  @Param max: number = 9999


  @Local val: number = 1

  // 外部参数变化重新赋值
  @Monitor(‘value’)
  onValueChange() {
    this.val = this.value
  }

  // 回调给外部
  @Monitor(‘val’)
  onValChange() {
    this.$value(this.val)
    this.onChange(this.val)
  }

  build() {
    Row() {
      Button() {
        Text() {
          SymbolSpan($r(‘sys.symbol.minus’))
        }
        .fontSize(18)
        .fontColor(this.val > this.min ? ‘#555’ : ‘#d6d6d6’)
        .textAlign(TextAlign.Center)
      }
      .type(ButtonType.Normal)
      .stateEffect(this.val > this.min ? true : false)
      .width(36)
      .height(36)
      .backgroundColor(’#f5f5f5’)
      .onClick(() => {
        if (this.val > this.min) {
          this.val–
        } else {
          this.val = this.min
        }
      })
      TextInput({ text: ${this.val} })
        .type(InputType.Number)
        .width(46)
        .height(36)
        .textAlign(TextAlign.Center)
        .padding(0)
        .borderRadius(0)
        .backgroundColor(’#f5f5f5’)
        .onChange((value: string) => {
          this.val = Number(value)
        })
        .onEditChange((isEditing: boolean) => {
          if (!isEditing) {
            if (this.val < this.min) {
              this.val = this.min
            } else if (this.val > this.max) {
              this.val = this.max
            }
          }
        })
      Button() {
        Text() {
          SymbolSpan($r(‘sys.symbol.plus’))
        }
        .fontSize(18)
        .fontColor(this.val < this.max ? ‘#555’ : ‘#d6d6d6’)
        .textAlign(TextAlign.Center)
      }
      .type(ButtonType.Normal)
      .stateEffect(this.val < this.max ? true : false)
      .width(36)
      .height(36)
      .backgroundColor(’#f5f5f5’)
      .onClick(() => {
        if (this.val > this.max) {
          this.val = this.max
        } else {
          this.val++
        }
      })
    }
    .borderRadius(5)
    .clip(true)
    .backgroundColor(’#f5f5f5’)
    .margin({ top: 5 })
  }
}