codecamp

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

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

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

说明

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

装饰器使用说明

  • 当前@Styles仅支持通用属性通用事件
  • @Styles方法不支持参数,反例如下。
    1. // 反例: @Styles不支持参数
    2. @Styles function globalFancy (value: number) {
    3. .width(value)
    4. }
  • @Styles可以定义在组件内或全局,在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。
    1. // 全局
    2. @Styles function functionName() { ... }
    3. // 在组件内
    4. @Component
    5. struct FancyUse {
    6. @Styles fancy() {
    7. .height(100)
    8. }
    9. }
  • 定义在组件内的@Styles可以通过this访问组件的常量和状态变量,并可以在@Styles里通过事件来改变状态变量的值,示例如下:
    1. @Component
    2. struct FancyUse {
    3. @State heightValue: number = 100
    4. @Styles fancy() {
    5. .height(this.heightValue)
    6. .backgroundColor(Color.Yellow)
    7. .onClick(() => {
    8. this.heightValue = 200
    9. })
    10. }
    11. }
  • 组件内@Styles的优先级高于全局@Styles。

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

使用场景

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

  1. // 定义在全局的@Styles封装的样式
  2. @Styles function globalFancy () {
  3. .width(150)
  4. .height(100)
  5. .backgroundColor(Color.Pink)
  6. }
  7. @Entry
  8. @Component
  9. struct FancyUse {
  10. @State heightValue: number = 100
  11. // 定义在组件内的@Styles封装的样式
  12. @Styles fancy() {
  13. .width(200)
  14. .height(this.heightValue)
  15. .backgroundColor(Color.Yellow)
  16. .onClick(() => {
  17. this.heightValue = 200
  18. })
  19. }
  20. build() {
  21. Column({ space: 10 }) {
  22. // 使用全局的@Styles封装的样式
  23. Text('FancyA')
  24. .globalFancy ()
  25. .fontSize(30)
  26. // 使用组件内的@Styles封装的样式
  27. Text('FancyB')
  28. .fancy()
  29. .fontSize(30)
  30. }
  31. }
  32. }
@BuilderParam装饰器:引用@Builder函数
@Extend装饰器:定义扩展组件样式
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }