当前位置: 首页 > ops >正文

HarmonyOS:Counter计数器组件

一、概述

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

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

二、属性

除支持通用属性外,还支持以下属性。

enableInc
enableInc(value: boolean)

设置增加按钮禁用或使能。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueboolean增加按钮禁用或使能。
默认值:true,true表示可以增加按钮,false表示禁止增加按钮。

enableDec
enableDec(value: boolean)

设置减少按钮禁用或使能。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueboolean减少按钮禁用或使能。
默认值:true,true表示可以减少按钮,false表示禁止减少按钮。

三、事件

除支持通用事件外,还支持以下事件:

onInc
onInc(event: () => void)

监听数值增加事件。

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

onDec
onDec(event: () => void)

监听数值减少事件。

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

四、示例

示例效果图

在这里插入图片描述

示例代码
TestCounter.ets

@Entry
@Component
struct TestCounter {@State message: string = '计数器组件';@State value: number = 0;build() {Column({ space: 10 }) {Text('禁用计数器组件的增加和减少按钮').id('TestCounterHelloWorld').fontSize(20).fontWeight(FontWeight.Bold).margin({ top: 20 })Counter() {Text(this.value.toString())}.enableDec(false).enableInc(false)Text(this.message).id('TestCounterHelloWorld').fontSize(20).fontWeight(FontWeight.Bold).margin({ top: 20 })Counter() {Text(this.value.toString())}.onInc(() => {this.value++console.log(`点击了 增加按钮 this.value = ${this.value}`);}).onDec(() => {this.value--console.log(`点击了 减少按钮 this.value = ${this.value}`);})}.height('100%').width('100%')}
}
http://www.xdnf.cn/news/12072.html

相关文章:

  • QQ邮箱发送验证码(Springboot)
  • AI系统负载均衡与动态路由
  • 力扣HOT100之二分查找: 34. 在排序数组中查找元素的第一个和最后一个位置
  • 数学建模-嘉陵江铊污染事件解题全过程文档及程序
  • 联软NSPM自动化策略管理 助力上交所加速国产化替代提升运维效率
  • matlab实现DBR激光器计算
  • 全维度测试通过!DolphinScheduler 3.2.0单节点部署与验证实录
  • cursor-free-vip使用
  • [实际项目2] 从西门子PLC中读取曲线数值并绘图
  • 半监督学习:低密度分离假设 (Low-Density Separation Assumption)
  • IT组织转型记:从运维支持到数字利润中心的蜕变
  • OpenCV CUDA模块图像处理-----对图像执行 均值漂移过程(Mean Shift Procedure)函数meanShiftProc()
  • opencv学习笔记1:图像基础、图像操作、直方图均衡化详解
  • 破局新能源消纳难题!安科瑞智慧能源平台助力10KV配电网重构未来
  • Python数据可视化科技图表绘制系列教程(三)
  • AtCoder-abc408_b 解析
  • React hook之userReducer
  • vue-19(Vuex异步操作和变更)
  • 【android bluetooth 协议分析 02】【bluetooth hal 层详解 7】【高通蓝牙hal-读流程介绍】
  • 古老界面硬核工具:小兵以太网测试仪(可肆意组包,打vlan)
  • 重启路由器ip不变怎么回事?原因分析与解决方法
  • Java八股文——集合「List篇」
  • 【计算机网络】NAT、代理服务器、内网穿透、内网打洞、局域网中交换机
  • npm install 报错:npm error: ...node_modules\deasync npm error command failed
  • linux 安装mysql8.0;支持国产麒麟,统信uos系统
  • SpringCloud——Nacos
  • SpringBoot自动化部署全攻略:CI/CD高效实践与避坑指南
  • 桂花网蓝牙网关物联网医院动态血糖管理应用案例
  • 金融系统功能测试:科技赋能,安全护航
  • 【赵渝强老师】Docker的图形化管理工具