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

1. **大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！**       

复制代码

​        除去系统预置的组件外，ArkTS 还支持自定义组件。使用自定义组件，可使代码的结构更加清晰，并且能提高代码的复用性。
一、自定义组件语法

自定义组件的语法如下图所示

各部分语法说明如下：

• struct关键字
  

struct是ArkTS新增的用于自定义组件或者自定义弹窗的关键字。其声明的数据结构和TS中的类十分相似，可包含属性和方法。

• build方法
  

build()方法用于声明自定义组件的UI结构。

• 组件属性
  

组件属性可用作自定义组件的参数，使得自定义组件更为通用。

• @Compnent装饰器
  

@Component装饰器用于装饰struct关键字声明的数据结构。struct被@Component装饰后才具备组件化的能力。
注： 装饰器是Typescript中的一种特殊语法，常用于装饰类、方法、属性，用于修改或扩展其原有的行为。
在学完自定义组件的语法之后，我们会发现前文案例中的每个页面实际上都是一个自定义组件。但是和自定义组件的语法相比，前边的每个案例还会多出一个@Entry装饰器，那@Entry的作用又是啥呢？
在鸿蒙应用中，每个页面都是由一些列组件组合而成的，并且这些组件都是逐层嵌套的，因此这些组件最终形成了一个组件树的结构，如下图所示

​        我们前边所编写的每个页面就相当于是组件树的根节点，而@Entry装饰器的作用就是标识该组件为组件树的根节点，也就是一个页面的入口组件。
二、自定义组件案例

​        现在需要对前文的开/关灯的案例做出如下改造，由于两个按钮的结构十分相似，所以可考虑自定义一个按钮组件，然后进行复用。
​        自定义组件可以放在文件内，也可以单独成一个文件
文件内：

1. @Entry
2. @Component
3. // 自定义组件
4. struct CustomCom {
5.   @State isOpen: boolean = false
7.   build() {
8.     Column({space:50}) {
9.       if (this.isOpen) {
10.         Image('pages/imgs/light-on.png')
11.           .height(300)
12.           .width(300)
13.       }else {
14.         Image('pages/imgs/light-off.png')
15.           .height(300)
16.           .width(300)
17.       }
18.       Row({space:50}){
19.         CustomButton({text:'Open',color:Color.Red}) //自定义组件传参
20.           .onClick(()=>{
21.             this.isOpen=false
22.           })
23.         Button('Open')
24.           .onClick(()=>{
25.             this.isOpen=true
26.           })
27.       }
28.     }
29.     .width('100%')
30.     .width('100%')
31.     .justifyContent(FlexAlign.Center)
32.   }
33. }
35. @Component
36. struct CustomButton {
37.   text:String ='Close'  //接收参数
38.   color:Color =Color.Blue
39.   build() {
40.     Button(this.text.toString())
41.       .backgroundColor(this.color)
42.   }
43. }

复制代码

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

1. @Component
2. export  struct CustomButton {
3.   text:String ='Close'  //接收参数
4.   color:Color =Color.Blue
5.   build() {
6.     Button(this.text.toString())
7.       .backgroundColor(this.color)
8.   }
9. }

复制代码

在要使用的文件中引入：

1. import { CustomButton } from './CumtomButton'

复制代码

光标置于报错处，alt+回车，选择导入类即可
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！