鸿蒙应用开发从入门到实战（八）：ArkTS自定义组件语法

  **大家好，我是潘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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！