大家好，我是潘Sir，持續分享IT技術，幫你少走彎路。《鴻蒙應用開發從入門到項目實戰》系列文章持續更新中，陸續更新AI+編程、企業級項目實戰等原創內容、歡迎關注！

​ 除去系統預置的組件外，ArkTS 還支持自定義組件。使用自定義組件，可使代碼的結構更加清晰，並且能提高代碼的複用性。

一、自定義組件語法

自定義組件的語法如下圖所示

各部分語法説明如下：

• struct關鍵字

struct是ArkTS新增的用於自定義組件或者自定義彈窗的關鍵字。其聲明的數據結構和TS中的類十分相似，可包含屬性和方法。

• build方法

build()方法用於聲明自定義組件的UI結構。

• 組件屬性

組件屬性可用作自定義組件的參數，使得自定義組件更為通用。

• @Compnent裝飾器

@Component裝飾器用於裝飾struct關鍵字聲明的數據結構。struct被@Component裝飾後才具備組件化的能力。

注： 裝飾器是Typescript中的一種特殊語法，常用於裝飾類、方法、屬性，用於修改或擴展其原有的行為。

在學完自定義組件的語法之後，我們會發現前文案例中的每個頁面實際上都是一個自定義組件。但是和自定義組件的語法相比，前邊的每個案例還會多出一個@Entry裝飾器，那@Entry的作用又是啥呢？

在鴻蒙應用中，每個頁面都是由一些列組件組合而成的，並且這些組件都是逐層嵌套的，因此這些組件最終形成了一個組件樹的結構，如下圖所示

​ 我們前邊所編寫的每個頁面就相當於是組件樹的根節點，而@Entry裝飾器的作用就是標識該組件為組件樹的根節點，也就是一個頁面的入口組件。

二、自定義組件案例

​ 現在需要對前文的開/關燈的案例做出如下改造，由於兩個按鈕的結構十分相似，所以可考慮自定義一個按鈕組件，然後進行復用。

​ 自定義組件可以放在文件內，也可以單獨成一個文件

文件內：

@Entry
@Component
// 自定義組件
struct CustomCom {
  @State isOpen: boolean = false

  build() {
    Column({space:50}) {
      if (this.isOpen) {
        Image('pages/imgs/light-on.png')
          .height(300)
          .width(300)
      }else {
        Image('pages/imgs/light-off.png')
          .height(300)
          .width(300)
      }
      Row({space:50}){
        CustomButton({text:'Open',color:Color.Red}) //自定義組件傳參
          .onClick(()=>{
            this.isOpen=false
          })
        Button('Open')
          .onClick(()=>{
            this.isOpen=true
          })
      }
    }
    .width('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct CustomButton {
  text:String ='Close'  //接收參數
  color:Color =Color.Blue
  build() {
    Button(this.text.toString())
      .backgroundColor(this.color)
  }
}

單獨文件：

新建ArkTS文件，將自定義組件內容拷貝

@Component
export  struct CustomButton {
  text:String ='Close'  //接收參數
  color:Color =Color.Blue
  build() {
    Button(this.text.toString())
      .backgroundColor(this.color)
  }
}

在要使用的文件中引入：

import { CustomButton } from './CumtomButton'

光標置於報錯處，alt+回車，選擇導入類即可

《鴻蒙應用開發從入門到項目實戰》系列文章持續更新中，陸續更新AI+編程、企業級項目實戰等原創內容，防止迷路，歡迎關注！