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

【高心星出品】

自定义组件的使用

在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页面被点击了后退")
}

}