自定义组件和生命周期
声明式开发范式
基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架,提供饿了构建HarmonyOS应用UI所必需的能力
通过设计声明式接口,开发者无需关心底层实现逻辑,将更多注意力放在上层业务上。
声明式UI
特征：
- 声明式描述
- 状态驱动视图更新
声明式描述
状态驱动视图更新
应用界面是动态的,需要根据状态不同显示不同的内容
- 状态：驱动应用变化的数据源
- 视图：与状态相关联的UI内容
自定义组件
通过多种组件的组合,封装为可重用、可组合的UI单元 以待办列表为例：
可以将待办列表的每一项封装成一个自定义组件ToDoItem:
@Builder labelIcon(icon:Resource){...}
@Component
struct ToDoItem{
@State isComplete:boolean=false
@Prop content:string;
build(){
Row(){
if(this.isComplete){
this.labelIcon($r('app.media.ic_ok'))
}else{
this.labelIcon($r('app.media.ic_default'))
}
Text(this.content)
...
}
.onClick(()=>{
this.isComplete=!this.isComplete;
})
}
}
待办列表页ToDoListPage由若干个ToDoItem组成
@Entry
@Compnent
struct ToDoListPage{
private tasks:Array<string>=[
'早起晨练',
'准备早餐',
'阅读名著',
'学习ArkTS',
'看剧放松'
]
build(){
Column(){
Text('待办')
...
ForEach(this.tasks,(item:string)=>{
ToDoItem({content:item})
//自定义组件通过.链式调用的形式设置通用样式
.width(300)
.height(50)
.backgroundColor(Color.blue)
},...)
}
}
}
- @Component装饰器定义为自定义组件
- struct声明自定义组件的数据结构
- build()函数定义自定义组件的声明式UI描述,自定义组件必须定义build()函数。
- @Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
- @Entry装饰的自定义组件,其build()函数下必须有一个容器组件作为根节点,其中ForEach禁止作为根节点
- @Component装饰器定义为自定义组件,其build()函数下必须有根节点，可以为非容器组件，同样ForEach禁止作为根节点。
页面和自定义组件的生命周期
页面和自定义组件的关系
- 自定义组件：@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期
- 页面：即应用的UI页面,可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件作为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。
页面的生命周期
即被@Entry装饰的组件生命周期:
- onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。
- onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。
- onBackPress:当用户点击返回按钮或者侧滑返回时触发。
组件的生命周期
- aboutToAppear:组件即将出现时调用该函数,即在创建自定义组件的新实例后,在其执行build()函数之前执行,在这个函数中可以对状态变量进行修改,这些修改会在后续执行build()函数时生效。
- onDidBuild:组件build()函数执行完成之后调用该函数,不建议在此时更改状态变量,这可能会导致不稳定的UI表现。
- aboutToDisappear:组件销毁之前执行,用户可以在这个函数回调中释放UI资源,不允许在此时改变状态变量。
