鸿蒙进阶篇-自定义组件

大家好，我是鸿蒙开天组，今天咱们来学习自定义组件。
一、自定义组件定义

在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是必要思量代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
相比于之前学习的轻量级 UI 复用机制 @Builder，自定义组件的功能更为强盛，日常开发中如果要对 【UI 或业务逻辑】进行复用，必要【掌握】自定义组件的能力。
二、自定义组件特点

自定义组件具有以下特点：

• 可组合：允许开发者组合使用系统组件、及其属性和方法。
  
• 可重用：自定义组件可以被其他组件重用，并作为差别的实例在差别的父组件或容器中使用。
  
• 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。
  

三、自定义组件根本用法

1.1自定义组件创建

首先自定义组件必要创建出来，创建的自定义组件根本语法如下：

1. // 创建
2. @Component
3. struct MyComponent {
4.   // 状态变量
5.   @State message:string =''
6.   build(){
7.     // .... 描述 UI
8.   }
9. }

复制代码

观察以上结构，紧张分成三个部分，可以明白成这是自定义组件创建的固定写法：

• @Component：@Component装饰器仅能装饰struct关键字声明的数据结构。
  
• struct：自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。
  
• build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。
  

要注意的是，struct后面的自定义组件名，这个名称就是自定义组件的标记，不能和系统组件名相同，比如不能命名成Text、Image等
有些细心的同学大概已经注意到，这个结构和咱们平时打开的默认页面结构很像，但是默认页面上，还多出了一个@Entry：

• @Entry：@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
  

在我们的单个组件中，没有使用@Entry去装饰的时间，想要单独预览它的结果，也可以思量使用@Preview装饰，再点击预览器即可预览结果。
1.2自定义组件使用

接下来是自定义组件的使用，使用当然是丢进有@Entry装饰的UI页面里了，我们用一个简单的例子来看看自定义组件的根本用法，上代码演示：

1. @Component
2. struct HelloComponent {
3.   @State message: string = 'mate70还没发布';
5.   build() {
6.     // HelloComponent自定义组件组合系统组件Row和Text
7.     Row() {
8.       Text(this.message)
9.         .onClick(() => {
10.           // 状态变量message的改变驱动UI刷新，UI从'mate70还没发布'或'mate70发布了'刷新为'mate70发布啦啊啊啊!'
11.           this.message = 'mate70发布啦啊啊啊!';
12.         })
13.         .width('100%')
14.         .height(60)
15.         .fontSize(20)
16.         .backgroundColor('#E6E6E6')
17.         .textAlign(TextAlign.Center)
18.     }
19.   }
20. }
22. /*-----------------------两个组件之间的分割线-------------------------*/
24. class HelloComponentParam {
25.   message: string = ""
26. }
28. @Entry
29. @Component
30. struct ParentComponent {
31.   param: HelloComponentParam = {
32.     message: 'mate70发布了'
33.   }
35.   build() {
36.     Column() {
37.       Text('mate70发布了吗？')
38.         .fontSize(20)
39.         .width('100%')
40.         .height(60)
41.         .backgroundColor('#E6E6E6')
42.         .textAlign(TextAlign.Center)
43.       HelloComponent();
44.       Divider()
45.       HelloComponent(this.param);
46.     }
47.   }
48. }

复制代码

点击前后的结果分别如下：

 1.3自定义组件传值

自定义组件除了必须要实现build()函数外，其他【属性】和【方法】的写法跟之前一样，也可以通过点语法设置通用样式，由于都和之前一样，这里就不再说明。
而从上面的例子，我们还可以看出，使用自定义组件时，小括号中没有传值，就会使用自定义组件HelloComponent中定义的message默认值，即“mate70还没发布”；如果在小括号中传同名的值即message时，默认值就会被覆盖，显示为“mate70发布了”。
以上例子上，我们可以把ParentComponent称为父组件，而在它内部调用的HelloComponent称之为子组件，今后这种父组件和子组件之间的参数传递会非常常见。
1.4传递回调参数

使用自定义组件时还有一种传递回调函数的写法,这种写法非常紧张。咱们来看看它的适用场景：

• 必要父组件传递【逻辑代码】给子组件
  
• 在 1 的基础上，子组件必要【传递数据】给父组件
  

基础代码结构如下：

1. @Component
2. struct 子组件 {
3.   // 1.定义箭头函数
4.   func1 = () => {}
5.   func2 = (参数: 类型) => {}
7.   build() {
8.     // 略 2.根据情境调用 func1,func2并传递参数
9.   }
10. }
12. @Entry
13. @Component
14. struct 父组件 {
15.   build() {
16.     子组件({
17.       // 3. 父组件传递回调函数给子组件
18.       func1: () => {
19.         // 具体的逻辑
20.       },
21.       func2: (参数: 类型) => {
22.         // 具体的逻辑
23.       }
25.     })
26.   }
27. }

复制代码

比如通过定义子组件的箭头函数，实现点击+1到+4的累加结果，这是不传递参数的写法：

1. @Component
2. struct addCom {
3.   // 1. 定义点击+1-+4的箭头函数
4.   addOne = () => {
5.   }
6.   addTwo = () => {
7.   }
8.   addThree = () => {
9.   }
10.   addFour = () => {
11.   }
13.   build() {
14.     Column() {
15.       Text('累加器')
16.         .fontSize(20)
17.       Row() {
18.         // 2. 调用+1-+4对应的回调函数
19.         Button('点击+1')
20.           .onClick(() => {
21.             this.addOne()
22.           })
23.         Button('点击+2')
24.           .onClick(() => {
25.             this.addTwo()
26.           })
27.         Button('点击+3')
28.           .onClick(() => {
29.             this.addThree()
30.           })
31.         Button('点击+4')
32.           .onClick(() => {
33.             this.addFour()
34.           })
35.       }
36.       .width('100%')
37.       .justifyContent(FlexAlign.SpaceBetween)
38.     }
39.     .border({ width: 1 })
40.     .padding(5)
42.   }
43. }
45. @Entry
46. @Component
47. struct Page04_callback {
48.   @State num: number = 0
50.   build() {
51.     Column() {
52.       Text('回调函数')
53.         .fontSize(50)
54.         .fontWeight(FontWeight.Bold)
55.       Text('num:' + this.num)
56.         .fontSize(30)
57.       addCom({
58.         // 3. 传递回调函数
59.         addOne: () => {
60.           this.num++
61.         },
62.         addTwo: () => {
63.           this.num += 2
64.         },
65.         addThree: () => {
66.           this.num += 3
67.         },
68.         addFour: () => {
69.           this.num += 4
70.         }
71.       })
72.     }
73.     .height('100%')
74.   }
75. }

复制代码

但如果使用参数传递，可以简化代码誊写，改写结果如下，功能是相同的：

1. @Component
2. struct addCom {
3.   // 点击+1-+4的箭头函数
4.   addCount = (count: number) => {
5.   }
7.   build() {
8.     Column() {
9.       Text('累加器-传递参数')
10.         .fontSize(20)
11.       Row() {
12.         Button('点击+1')
13.           .onClick(() => {
14.             this.addCount(1)
15.           })
16.         Button('点击+2')
17.           .onClick(() => {
18.             this.addCount(2)
19.           })
20.         Button('点击+3')
21.           .onClick(() => {
22.             this.addCount(3)
23.           })
24.         Button('点击+4')
25.           .onClick(() => {
26.             this.addCount(4)
27.           })
28.       }
29.       .width('100%')
30.       .justifyContent(FlexAlign.SpaceBetween)
31.     }
32.     .border({ width: 1 })
33.     .padding(5)
35.   }
36. }
38. @Entry
39. @Component
40. struct Page04_callback {
41.   @State num: number = 0
43.   build() {
44.     Column() {
45.       Text('回调函数')
46.         .fontSize(50)
47.         .fontWeight(FontWeight.Bold)
48.       Text('num:' + this.num)
49.         .fontSize(30)
50.       addCom({
51.         addCount: (count: number) => {
52.           this.num += count
53.         }
54.       })
55.     }
56.     .height('100%')
57.   }
58. }

复制代码

好了，关于自定义组件的分享就到这里，感谢阅读，你的点赞和收藏都是莫大的支持，谢谢！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。