鸿蒙开发(21) @Styles装饰器定义组件重用样式和@Extend装饰器：定义扩展组件样式

@Styles装饰器定义组件重用样式

如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器@Styles。

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

组件内公共样式有两种方案:

1. 组件内定义语法
2. 组件外定义

组件内定义语法

  //这是组件内部提取的公共样式
  @Styles titleText() {
   
    .width(100)
    .height(100)
    .backgroundColor(Color.Red)
  }
  Column().titleText()

注意：不是所有的样式都可以提取到@Styles装饰器中。一般默认是容器的布局属性是可以提取到 @Styles装饰器中，但是字体或者文本样式，不支持提取。

组件外定义

//组件外部定义
@Styles function titleText2() {
   
  .width(100)
    .height(100)
    .backgroundColor(Color.Orange)
}

@Entry
@Component
struct Page05_AddTask {
   
	build() {
   
		Column().titleText2()
	}
}

• @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
• @Styles方法不能有参数，编译期会报错，提醒开发者@Styles方法不支持参数。
• 不支持在@Styles方法内使用逻辑组件，在逻辑组件内的属性不生效。

@Extend装饰器：定义扩展组件样式

在前文的示例中，可以使用@Styles用于样式的重用，在@Styles的基础上，我们提供了@Extend，用于扩展原生组件样

语法

@Extend(UIComponentName) function functionName {
    ... }

使用规则

• 和@Styles不同，@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。

// @Extend(Text)可以支持Text的私有属性fontColor
@Extend(Text) function fancy () {
   
  .fontColor(Color.Red)
}
// superFancyText可以调用预定义的fancy
@Extend(Text) function superFancyText