HarmonyOS NEXT实战：计数器

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

目标：设置计数器，通过点击加减数字。

知识点： Counter 计数器组件，提供相应的增加或者减少的计数操作。

Counter属性

enableInc(value: boolean) //设置增加按钮禁用或使能。默认值：true
enableDec(value: boolean)//设置减少按钮禁用或使能。默认值：true

Counter事件

onInc(event: () => void) //监听数值增加事件。
onDec(event: () => void) //监听数值减少事件。

CounterComponent 定义计数器组件。

CounterComponent({ options: CounterOptions })

CounterOptions定义Counter的类型及具体式样参数。

CounterOptions属性

• type：指定当前Counter的类型。
• direction：布局方向。默认值：Direction.Auto
• numberOptions：列表型和紧凑型counter的式样。
• inlineOptions：普通数字内联调节型Counter的式样。
• dateOptions：日期型内联型counter的式样。

CounterType CounterType指定Counter的类型，如列表型Counter。

CommonOptions CommonOptions定义Counter的共通属性和事件。

CommonOptions属性

• focusable：设置Counter是否可以获焦。说明：该属性对列表型、紧凑型Counter生效。默认值：true。true：设置Counter可以获焦；false：设置Counter不可以获焦。
• step：设置Counter的步长。取值范围：大于等于1的整数。默认值：1
• onHoverIncrease：鼠标进入或退出Counter组件的增加按钮触发该回调。
• onHoverDecrease：鼠标进入或退出Counter组件的减小按钮触发该回调。

InlineStyleOptions InlineStyleOptions定义Inline Style（数值内联型Counter）的属性和事件。

InlineStyleOptions属性 value：设置Counter的初始值。默认值：0 min：设置Counter的最小值。默认值：0 max：设置Counter的最大值。默认值：999 textWidth：设置数值文本的宽度。默认值：0 onChange：当数值改变时，返回当前值。

DateStyleOptions DateStyleOptions定义Date style（日期内联型Counter）的属性和事件。

DateStyleOptions属性 year：设置日期内联型初始年份。默认值：1 month：设置日期内联型初始月份。默认值：1 day：设置日期内联型初始日。默认值：1 onDateChange (date: DateData)=>void：当日期改变时，返回当前日期。date：当前显示的日期值。

DateData DateData定义Date通用属性和方法，如年、月、日。

DateData属性 year：设置日期内联型初始年份。 month：设置日期内联型初始月份。 day：设置日期内联型初始日。

实战：CounterDemoPage

import { CounterComponent, CounterType } from '@kit.ArkUI'

@Entry
@Component
struct CounterDemoPage {
  @State value: number = 1

  build() {
    Column({ space: 20 }) {
      Text('计数器Demo')

      Counter() {
        Text(this.value.toString())
      }
      .onInc(() => {
        this.value++
      })
      .onDec(() => {
        this.value--
      })

      CounterComponent({
        options: {
          type: CounterType.COMPACT,
          numberOptions: {
            label: "数量",
            value: 10,
            min: 1,
            max: 100,
            step: 1
          }
        }
      })

      Text('通常用于购物车、页码等业务模块')
    }
    .height('100%')
    .width('100%')
  }
}