ArkUI 开发框架提供了 Counter 组件实现计数器功能,计数器的使用场景很常见,比如购物类 APP 在添加或者减少商品的时候会使用到计数器,它可以包含一个子组件,本节笔者简单介绍一下 Counter 的使用。
Counter 定义介绍
interface CounterInterface {
(): CounterAttribute;
}
由源码可知,Counter 使用时暂不需要配置额外参数。
简单样例如下所示:
@Entry @Component struct ComponentTest {
build() {
Column() {
Row() {
Counter() // 默认效果
Counter() { // 包含一个子组件
Text('1') // Text 默认值为 1
.fontSize(18) // Text 字体大小
}
}
.justifyContent(FlexAlign.SpaceAround)
.width("100%")
}
.width("100%")
.height("100%")
.padding(10)
}
}
Counter 事件介绍
declare class CounterAttribute extends CommonMethod<CounterAttribute> {
onInc(event: () => void): CounterAttribute;
onDec(event: () => void): CounterAttribute;
}
Counter 没有提供额外的属性方法,只提供了 onInc()
和 onDec()
两个事件回调方法,各方法说明如下所示:
- onInc:数字增加的事件回调。
- onDec:数字减少的事件回调。
Counter 完整样例
@Entry @Component struct ComponentTest {
@State value: number = 0
build() {
Column() {
Counter() {
Text(this.value.toString())
.fontSize(18)
}
.onInc(() => { // 自增操作
this.value++;
})
.onDec(() => { // 自减操作
this.value--;
})
}
.width("100%")
.height("100%")
.padding(20)
}
}
为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:
如何快速入门:https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识:https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发:https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向