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

作者：程序员潘Sir

2025-09-18
四川
本文字数：1363 字
阅读完需：约 4 分钟

大家好，我是潘 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)  }}
@Componentstruct CustomButton {  text:String ='Close'  //接收参数  color:Color =Color.Blue  build() {    Button(this.text.toString())      .backgroundColor(this.color)  }}

复制代码

单独文件：

新建 ArkTS 文件，将自定义组件内容拷贝

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

复制代码

在要使用的文件中引入：

import { CustomButton } from './CumtomButton'

复制代码

光标置于报错处，alt+回车，选择导入类即可

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/fc6812495418a28542bd130c0】。文章转载请联系作者。

程序员潘Sir

关注

网名：黑马腾云 2020-06-22 加入

80后创业者、高级架构师，带你轻松学编程！著有《Node.js全栈开发从入门到项目实战》、《Java企业级软件开发》、《HarmonyOS应用开发实战》等书籍。“自学帮”公众号主。

发布

暂无评论

创作场景

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

一、自定义组件语法

二、自定义组件案例

程序员潘Sir

评论