鸿蒙UI开发快速入门 —— part05:组件的样式复用

1、 为什么要样式复用？

如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，样式的复用就很有必要了。

为此，鸿蒙推出了可以提炼公共样式进行复用的装饰器@Styles；

2、@Styles装饰器

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

有几点需要特别注意：

• 目前@Styles仅支持通用属性和通用事件。

  什么是通用属性和通用事件？

    通用属性指的是所有组件都具备的属性，例如：背景色、边框、宽高、圆角、字体等。通用事件指的是所有组件都具备的用户交互事件，例如：点击事件、焦点事件、长按事件等。

• @Styles方法不支持参数，反例如下

// 反例：@Styles不支持参数@Styles function globalFancy (value: number) {
    .width(value)}

• @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。

// 全局【只能在当前文件内使用，不支持export。】@Styles function functionName() { ... }// 在组件内@Componentstruct FancyUse {
    @Styles fancy() {
      .height(100)  }}

• 定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值，示例如下：

@Componentstruct FancyUse {
    @State heightValue: number = 100  @Styles fancy() {
      .height(this.heightValue)    .backgroundColor(Color.Yellow)    .onClick(() => {
        this.heightValue = 200    })  }}

• 组件内@Styles的优先级高于全局@Styles。

  框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

3、@Styles装饰器Demo

以下示例中演示了组件内@Styles和全局@Styles的用法。