HarmonyOS NEXT-自定义组件和生命周期

自定义组件和生命周期

声明式开发范式

基于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资源,不允许在此时改变状态变量。

组件(页面)生命周期流程图