鸿蒙页面开发 - 扩展组件样式 @Extend

这篇文章介绍一个装饰器 @Extend,它的主要作用是:用于扩展原生组件的样式

语法

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

定义规则:

  1. UIComponentName:组件名称,例如 TextButton
  2. 后面必须跟 function 关键字
  3. 只能在全局定义,不支持组件内定义

举例

比如我们扩展 Text 组件的样式,为其添加一个默认的 fontSizefontColor,如下:

@Entry
@Component
struct Index {
  build() {
    Text('碧玉妆成一树高,万条垂下绿丝绦。')
      .TextExtend()
  }
}

@Extend(Text)
function TextExtend() {
  .fontSize(20)
  .fontColor(Color.Blue)
}

通过上面的代码,我们就为 Text 组件扩展了一些样式,让其拥有了默认的字体大小和字体颜色,效果如下:

img_1.png

因为@Extend是作用于单个组件,所以也支持组件的所有属性和事件(包括组件的私有属性),这点和 @Styles 不同

并且他 只能在全局定义,不支持组件内部定义

@Extend支持传参(@Styles不支持)

@Entry
@Component
struct Index {
  build() {
    Text('碧玉妆成一树高,万条垂下绿丝绦。')
      .TextExtend(22)
  }
}

@Extend(Text)
function TextExtend(fontSize: number) {
  .fontSize(fontSize)
  .fontColor(Color.Blue)
} 

@Extend传的参数,支持传入状态变量,当变量改变时,UI也会重新渲染

@Entry
@Component
struct Index {
  @State fontSize: number = 16

  build() {
    Text('碧玉妆成一树高,万条垂下绿丝绦。')
      .TextExtend(this.fontSize)
      .onClick(() => {
        this.fontSize = 24
      })
  }
}

@Extend(Text)
function TextExtend(fontSize: number) {
  .fontSize(fontSize)
  .fontColor(Color.Blue)
} 

效果如下:

@Extend支持调用其他方法,继承其他方法的属性

比如在 TextExtend_1 中定义字体的大小、颜色。在 TextExtend_2 定义背景颜色,并且在 TextExtend_2 中调用 TextExtend_1 方法

@Entry
@Component
struct Index {
  build() {
    Text('碧玉妆成一树高,万条垂下绿丝绦。')
      .TextExtend_2()
  }
}

@Extend(Text)
function TextExtend_1() {
  .fontSize(20)
  .fontColor(Color.Blue)
}

@Extend(Text)
function TextExtend_2() {
  .backgroundColor(Color.Gray)
  .TextExtend_1()
}

@Extend装饰的方法,参数可以为function,作为Event事件的句柄。

@Extend(Text) function makeMeClick(onClick: () => void) {
   .backgroundColor(Color.Blue)
   .onClick(onClick)
}

@Entry
@Component
struct FancyUse {
   @State label: string = 'Hello World';

   onClickHandler() {
      this.label = 'Hello ArkUI';
   }
   
   build() {
      Row({ space: 10 }) {
         Text(`${this.label}`)
            .makeMeClick(() => {this.onClickHandler()})
      }
   }
}

总结

  1. @Extend 支持组件的私有属性和私有方法。并且只能在全局定义,不支持组件内部定义 (@Styles只支持通用属性和通用方法,可以在全局定义,也可以在组件内定义)
  2. @Extend 支持传参,也可以传入状态变量,当变量改变的时候,UI也会重新渲染(@Style不支持传参)

最后

如果大家有不理解的地方可以留言,或自行阅读文档 文档地址

  • 语法
  • 举例
  • @Extend支持传参(@Styles不支持)
  • @Extend传的参数,支持传入状态变量,当变量改变时,UI也会重新渲染
  • @Extend支持调用其他方法,继承其他方法的属性
  • @Extend装饰的方法,参数可以为function,作为Event事件的句柄。
  • 总结
  • 最后
posted @   时光凉忆  阅读(147)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目
点击右上角即可分享
微信分享提示