以下内容基于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 双向关联 |
初始化时机 | 声明时 | 创建组件时由参数传入 | 创建组件时由参数传入 |