ArkTs的UI装饰器（自定义组件生命周期、页面组件生命周期、所有UI装饰器使用及示例）

目录

自定义组件定义

UI装饰器

@Component（V1）

自定义组件生命周期

freezeWhenInactive11+

@Entry（通用）

页面组件生命周期

EntryOptions10+

Component、Entry示例

@Reusable（V1）

@Builder（通用）

@BuilderParam（通用）

参数

 引用传递示例

this指向

尾随闭包

@LocalBuilder（通用）

this指向示例 

@Styles（通用）

@Extend（通用）

@AnimatableExtend（通用）

可/不可动画属性

AnimatableArithmetic

 @Require（通用）

---

自定义组件定义

在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。

自定义组件可以通过@Component或@ComponentV2装饰器去定义，两种的区别在于一个是早期的版本，一个新推出的版本。他们搭配使用的UI装饰器和状态管理装饰器不同，两种不能混用。如下：

@Component搭配V1版本的状态管理装饰器（@Reusabel、@State、@Prop、@Link等）使用。

@ComponentV2搭配V2版本的状态管理装饰器（@Local、@Param等）使用。

这里我们只介绍@Component，@ComponentV2在V2状态管理中介绍。

下面标题中装饰器后面的V1代表搭配@Component使用，V2代表搭配@ComponentV2使用。通用表示都可以使用。

UI装饰器

@Component（V1）

@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。@Component可以接受一个可选的bool类型参数，用来冻结自定义组件（冻结的组件不会随@state变量更新变化UI）。

自定义组件生命周期

被@Component装饰的自定义组件系统会提供以下生命周期：

1. aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。

2. onDidBuild：组件build()函数执行完成之后回调该接口，开发者可以在这个阶段进行埋点数据上报等不影响实际UI的功能。不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，这可能会导致不稳定的UI表现。

3. aboutToDisappear：aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

freezeWhenInactive11+

组件冻结选项。

名称	类型	必填	说明
freezeWhenInactive	bool	否	是否开启组件冻结。

@Component({ freezeWhenInactive: true })
struct MyComponent {
    aboutToAppear(){},
    onDidBuild(){},
    aboutToDisappear(){},
    build(){
        //这里写UI部分
    }
}

@Entry（通用）

修饰@Component定义的自定义组件，将其作为入口组件（页面组件）。

入口组件：可以作为页面路由单独显示的，可以理解为一个完整的页面，无@Entry修饰的自定义组件只是部分页面，应用只能显示完整的页面，可以通过windowStage.loadContent方法决定挂载哪一个完整页面。

页面组件生命周期

被@Entry装饰的页面组件系统会提供以下生命周期：

1. onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。

2. onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。

3. onBackPress：当用户点击返回按钮时触发。

@Entry可以接受一个可选的LocalStorage的参数或者一个可选的EntryOptions参数。入参见

EntryOptions10+

命名路由跳转选项。

名称	类型	必填	说明
routeName	string	否	表示作为命名路由页面的名字。
storage	LocalStorage	否	页面级的UI状态存储。
useSharedStorage12+	boolean	否	是否使用LocalStorage.getShared()接口返回的LocalStorage实例对象，默认值false。

说明

当useSharedStorage设置为true，并且storage也被赋值时，useSharedStorage的值优先级更高。

@Entry({ routeName : 'myPage' })
@Component
struct MyComponent {
}

Component、Entry示例