第十节HarmonyOS 常用容器组件2-Counter

1、描述

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

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

2、子组件

可以包含子组件。

3、接口

Counter()

从API version 9开始，该接口支持在ArkTS卡片中使用。

4、属性

支持通用属性

5、事件

不支持通用事件和手势，仅支持如下事件：

名称	功能描述
onInc(event:() => void)	监听数值增加事件。从API version 9开始，该接口支持在ArkTS卡片中使用。
onDec(event:() => void)	监听数值减少的事件。从API version 9开始，该接口支持在ArkTS卡片中使用。

6、示例

import router from '@ohos.router'@Entry
@Component
struct CounterPage {@State message: string = '计数器组件，提供相应的增加或者减少的计数操作。'@State value: number = 0@State value2: number = 0build() {Row() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width("96%").margin({ top: 12 })Counter() {Text(this.value.toString()).fontColor(Color.Red)}.margin(10).onInc(() => {this.value++;}).onDec(() => {if (this.value > 1) {this.value--;} else {this.value = 0;}})Counter() {Text(this.value2.toString()).fontColor(Color.Blue)}.margin(10).onInc(() => {this.value2 = this.value2 + 5;}).onDec(() => {if (this.value2 > 5) {this.value2 = this.value2 - 5;} else {this.value2 = 0;}})Blank(12)Button("Counter文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/containerComponents/counter/CounterDesc",})})}.width('100%')}}
}

7、效果图