【高心星出品】
自定义组件的使用
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
创建自定义组件
自定义组件的基本结构
@Component
export struct hellocomponent{
// 状态变量
@State message:string ='hello component'
// 私有变量
private content
// 构建函数 写法跟build类似
@Builder
genxx(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函数
@Builder
genxx(){
}
// 构建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类似
@Builder
genxx(aa){
}
// 样式函数 全局样式
@Styles
genstyle(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函数
@Builder
genxx(){
}
// 构建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页面被点击了后退")
}
}
