鸿蒙ArkTS之装饰器(一)
以下内容基于HarmonyOS 3.1 Developer Preview (API9)版本,虚拟机测试可以兼容API8
ArkTS采用装饰器标注对象的功能。
基础UI组件结构
每个UI组件需要定义为@Component struct对象,其内部必须包含一个且只能包含一个build(){}函数,用于绘制UI;struct之内、build()函数之外的地方用于存放数据。
@Component struct SampleUIComponent { // data build() { // ui } }
基本UI装饰器@Entry、@Component
@Entry
装饰struct,页面的入口
@Component
装饰struct,表示该struct具有基于组件的能力
数据装饰器@State、@Prop、@Link
@State
当该数据被修改时,所在组件的build()方法会被重新调用,进而重绘所在的UI。该装饰器的作用范围仅限于其所在的UI内部
@Prop
该组件继承了@State的基本功能,同时,又有两个新的特点:
- 只能被其父控件的@State变量初始化(假设为a)。
- 与其父组件建立其单向联系:监其听父组件中的变量a,当a的值发生变化时,该@Prop也会同步变化,进而重绘其所在控件的UI。
@Link
与@Prop不同的是,@Link会与其父控件中对应的@State变化建立双向联系,即当子组件中的@Link对象的之发生变化时,其父组件中对应的@State变量也会随之变化,这个时候父子UI都会重绘。
三个装饰器的相同点
- 会引起ui重绘
- 内部私有
三个装饰器的不同点
不同点 | @State | @Prop | @Link |
---|---|---|---|
装饰内容 | 基本数据类型,类,数组 | 基本数据类型 | 基本数据类型,类,数组 |
关联 | 不与其他控件关联 | 父@State -> 子@Prop 单向关联 | 父@State <-> 子@Link 双向关联 |
初始化时机 | 声明时 | 创建组件时由参数传入 | 创建组件时由参数传入 |
@Provide、@Consume
顾名思义,这一对是形成生产者-消费者模式的装饰器,且双向绑定
@Provide必须设置初始值,@Consume不可设置默认初始值。
触发变化的时机:
- 基础类型(boolean,string,number)变量的改变;
- @Observed class类型变量及其属性的修改;
- 添加,删除,更新数组中的元素。
`
struct CompA {
@Provide("reviewVote") reviewVotes: number = 0;
}
struct CompC {
@Consume("reviewVote") reviewVotes: number
}
`
@Watch
顾名思义,使用观察者模式的装饰器,但该装饰器不是触发变量变化,而是绑定一个函数,当@Watch变量变化时,调用该函数。
`
struct ComA {
// 绑定onBasketUpdate方法,当变量更新时调用
@State @Watch('onBasketUpdate') shopBasket: Array
onBasketUpdate(propName: string): void {
this.updateTotal()
}
}
`
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析