HarmonyOS Next应用开发——自定义组件的使用

自定义组件的使用

在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

创建自定义组件

自定义组件的基本结构

@Component
export struct hellocomponent{// 状态变量@State message:string ='hello component'// 私有变量private content// 构建函数 写法跟build类似@Buildergenxx(aa){}// 构建UI界面 一个文本显示框build(){Text(this.message).border({color:Color.Red,width:1,radius:5}).fontSize(22).fontWeight(FontWeight.Bolder).width('100%').padding(5).onClick(()=>{this.message=this.content})}
}

@Component是组件的注解，声明一个组件；

export对外共享该组件，struct生命组件名称；

可以有成员变量、@builder注解的函数和build函数构成。

使用自定义组件

UI入口组件

@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。

// 引入其他自定义组件
import { hellocomponent } from '../components/hellocomponents'
@Entry
@Component
struct Index {// 状态变量@State message: string = 'Hello World'// 成员变量private flag:boolean// 构建函数 写法同build函数@Buildergenxx(){}// 构建ui函数build() {Row() {Column() {//  自定义组件的使用hellocomponent({content:'hello arkui'})}.width('100%')}.height('100%')}
}

入口组件与自定义组件唯一的区别就是build函数。

自定义组件的build函数要求有唯一的容器，如上row作为唯一容器，自定义组件并没有该要求。

入口组件使用自定义组件的时候可以直接调用，并且初始化其中的成员变量。
build函数中不能使用一些语法：
- 不能声明变量
- 不能日志打印
- 不能调用非@builder修饰的函数

自定义组件生命周期

页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：

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

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

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

组件生命周期，即一般用@Component装饰的自定义组件的生命周期，页面也可以定义这些生命周期函数，提供以下生命周期接口：

aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
aboutToDisappear：在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

在这里插入图片描述

自定义组件完整写法

/***作者：gxx*日期：2024-03-13 17：25：59*介绍：*自定义组件**/@Component
export struct hellocomponent{// 状态变量@State message:string ='hello component'// 私有变量private content// 构建函数 写法跟build类似@Buildergenxx(aa){}// 样式函数 全局样式@Stylesgenstyle(aa){}// 构建UI界面build(){Text(this.message).border({color:Color.Red,width:1,radius:5}).fontSize(22).fontWeight(FontWeight.Bolder).width('100%').padding(5).onClick(()=>{this.message=this.content})}aboutToAppear(){console.info("gxx 自定义组件准备显示")}aboutToDisappear(){console.info("gxx 自定义组件准备消失")}
}

入口界面完整写法

// 引入其他自定义组件
import { hellocomponent } from '../components/hellocomponents'
@Entry
@Component
struct Index {// 状态变量@State message: string = 'Hello World'// 成员变量private flag:boolean// 构建函数 写法同build函数@Buildergenxx(){}// 构建ui函数build() {Row() {Column() {//  自定义组件的使用hellocomponent({content:'hello arkui'})}.width('100%')}.height('100%')}aboutToAppear(){console.info("gxx页面准备显示")
}
aboutToDisappear(){console.info("gxx页面准备消失")
}
onPageShow(){console.info("gxx页面显示")
}
onPageHide(){console.info("gxx页面消失")
}
onBackPress(){console.info("gxx页面被点击了后退")
}}