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

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

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

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

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

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

效果如下:

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

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

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

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

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

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

typescript 复制代码
@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 方法

typescript 复制代码
@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事件的句柄。

typescript 复制代码
@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不支持传参)

最后

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

相关推荐
沧海一笑-dj5 天前
【鸿蒙开发】Hi3861学习笔记- 软件定时器示例
harmonyos·鸿蒙·openharmony·鸿蒙开发·软件定时器·hi3861
敢嗣先锋10 天前
鸿蒙5.0实战案例:基于OpenGL渲染视频画面帧
移动开发·音视频·harmonyos·arkts·opengl·arkui·鸿蒙开发
时光凉忆10 天前
鸿蒙开发 - 页面路由(页面跳转、返回)
鸿蒙开发
敢嗣先锋12 天前
鸿蒙5.0实战案例:基于原生能力获取视频缩略图
移动开发·harmonyos·arkui·组件化·鸿蒙开发
敢嗣先锋12 天前
鸿蒙5.0实战案例:基于hvigor插件定制构建
移动开发·harmonyos·arkts·arkui·组件化·鸿蒙开发·hvigor
敢嗣先锋14 天前
鸿蒙5.0实战案例:基于原生能力的压缩与解压缩能力
c语言·移动开发·harmonyos·arkui·鸿蒙开发
敢嗣先锋17 天前
鸿蒙5.0实战案例:基于WaterFlow的页面滑动加载
c++·移动开发·harmonyos·arkui·组件化·鸿蒙开发·页面布局
敢嗣先锋18 天前
鸿蒙5.0实战案例:基于原生能力的横竖屏旋转适配
移动开发·harmonyos·openharmony·arkui·鸿蒙开发
敢嗣先锋22 天前
鸿蒙5.0实战案例:基于ImageKit对图片进行处理
移动开发·harmonyos·arkui·组件化·鸿蒙开发
敢嗣先锋22 天前
鸿蒙5.0实战案例:基于ArkUI的验证码实现
移动开发·harmonyos·openharmony·arkui·鸿蒙开发