ArkUI自定义组件、自定义构建函数、自定义组件重用样式

1.什么是自定义组件

• 在ArkUI中，UI显示的内容均为组件，由框架直接提供的类似Text、Image等成为系统组件，由开发者自定义的成为自定义组件。

2.自定义组件的特点

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

3.自定义组件的基本结构

• 正常自定义组件结构：

3.1 struct:

• 自定义组件基于struct实现，struct +自定义组件名{ … }的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以实例化可以省略new。
  说明：自定义组件名、类名、函数名不能和系统组件名相同。

3.2 @Component：

• @Component装饰器只能装饰struct关键字声明数据结构，struct被@Component装时候具备组件化能力，但是需要实现build方法描述UI,一个struct只能被一个@Component装饰。
• 多个@Component状态

3.3 build()函数：

• build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。
• 没有build()状态

3.4 @Entry:

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

• 两个@Entry异常状态
  

• 正常状态

3.5 简单自定义组件代码

3.6 注意事项：项目中组件名不能重复。

重名调用后报错内容：

4.自定义构建函数 @Builder装饰器

• ArkUI不仅提供了自定义组件方式，还提供了一种更轻量级的UI复用方式@Builder，@Builder所装饰的函数遵循bulid()函数语法规则，可以将重复使用的UI元素抽象成一个方法，在build方法中调用
• 自定义构建函数可以定义在两处：
  1.组件内自定义构建函数
  2.组件外在全局自定义构建函数

说明
从API version 9开始，该装饰器支持在ArkTS卡片中使用。

• 示例代码

4.1 全局自定义构建函数

组件外：自定义构建函数 需要function关键字

4.2 组件内自定义构建函数

组件内自定义构建函数因为在当前页面调用需要this.函数名()

5.@styles装饰器自定义组件重用样式

5.1自定义组件重用样式注意事项

• 仅可封装**通用属性和通用事件**
• @Styles方法不支持参数
• @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
• 组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。
• 定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值

5.2自定义组件重用样式用法

5.3异常情况下

• 非通用属性情况下异常

• 有参数情况下异常

6.@Extend 装饰器，可以设置组件特有属性，仅可定在全局。

6.1使用规则

• 仅支持定义在全局，不支持在组件内部定义
• 支持封装指定的组件的私有属性和私有事件
• 支持参数传递
• @Extend装饰的方法的参数可以为function，作为Event事件的句柄。

6.2基础语法

@Extend(UIComponentName) function functionName (参数…){ … }

6.3基础语法

6.4 注意事项：项目中组件特有属性封装不能重复。