33.HarmonyOS NEXT NumberBox 步进器高级技巧与性能优化

// 与Slider双向绑定
@State value: number = 50

Slider({
  value: this.value,
  onChange: (v) => this.value = v
})

NumberBox({
  value: this.value,
  onChange: (v) => this.value = v
})

// 根据用户权限动态配置
NumberBox({
  min: this.userLevel > 1 ? 10 : 0,
  max: this.userLevel > 2 ? 100 : 50,
  disabled: !hasEditPermission
})

// 防抖处理（300ms）
private debounceUpdate = (value: number) => {
  clearTimeout(this.timer)
  this.timer = setTimeout(() => {
    this.saveToCloud(value)
  }, 300)
}

NumberBox({
  onChange: (v) => this.debounceUpdate(v)
})

// 虚拟列表懒加载
List({ scroller: this.scroller }) {
  ForEach(this.data, (item) => {
    ListItem() {
      NumberBox({
        value: item.count,
        onChange: (v) => this.updateItem(v)
      })
    }
  })
}
.onVisibleAreaChange((ratio) => {
  // 动态加载可见项数据
})

@Component
struct SmartNumberBox {
  @Prop value: number
  @Prop min: number = 0
  @Prop max: number = 100

  build() {
    NumberBox({
      value: this.value,
      min: this.min,
      max: this.max,
      onChange: (v) => this.value = v
    })
  }
}

describe('NumberBox Test', () => {
  it('should respect min value', () => {
    const wrapper = new NumberBoxWrapper({ min: 5 })
    wrapper.simulateChange(3)
    expect(wrapper.value).toEqual(5)
  })
})

@State scale: number = 1

NumberBox({
  onChange: (v) => {
    this.scale = 1.2
    animateTo({ duration: 300 }, () => {
      this.scale = 1
    })
  }
})
.scale({ x: this.scale })

GestureGroup(Gesture.Tap().onAction(() => {
  // 双击重置
})).onClick(() => {
  this.value = this.defaultValue
})

// 分页加载策略
LazyForEach(this.dataSource, (item) => {
  NumberBox({
    value: item.value,
    onChange: this.updateItem
  })
})

const numberBoxPool = new RecyclePool(() => {
  return new NumberBoxComponent()
}, 10)

function getNumberBox() {
  return numberBoxPool.get()
}