【高心星出品】

自定義組件的使用

在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頁面被點擊了後退")
}

}