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%')
}
}
