鸿蒙next开发:定义扩展组件样式规范-@Extend

185 篇文章 0 订阅
181 篇文章 2 订阅

可以使用@Styles用于样式的扩展,在@Styles的基础上,我们提供了@Extend,用于扩展原生组件样式。

说明

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

从API version 11开始,该装饰器支持在元服务中使用。

装饰器使用说明

语法

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

使用规则

  • 和@Styles不同,@Extend仅支持在全局定义,不支持在组件内部定义。

说明

只能在当前文件内使用,不支持export

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

    // @Extend(Text)可以支持Text的私有属性fontColor
    @Extend(Text) function fancy () {
      .fontColor(Color.Red)
    }
    // superFancyText可以调用预定义的fancy
    @Extend(Text) function superFancyText(size:number) {
        .fontSize(size)
        .fancy()
    }
  • 和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值调用。

    // xxx.ets
    @Extend(Text) function fancy (fontSize: number) {
      .fontColor(Color.Red)
      .fontSize(fontSize)
    }
    
    @Entry
    @Component
    struct FancyUse {
      build() {
        Row({ space: 10 }) {
          Text('Fancy')
            .fancy(16)
          Text('Fancy')
            .fancy(24)
        }
      }
    }
  • @Extend装饰的方法的参数可以为function,作为Event事件的句柄。

     
  • @Extend的参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染。

     
      
    1. @Extend(Text) function fancy (fontSize: number) {
    2. .fontColor(Color.Red)
    3. .fontSize(fontSize)
    4. }
    5. @Entry
    6. @Component
    7. struct FancyUse {
    8. @State fontSizeValue: number = 20
    9. build() {
    10. Row({ space: 10 }) {
    11. Text('Fancy')
    12. .fancy(this.fontSizeValue)
    13. .onClick(() => {
    14. this.fontSizeValue = 30
    15. })
    16. }
    17. }
    18. }

使用场景

以下示例声明了3个Text组件,每个Text组件均设置了fontStyle、fontWeight和backgroundColor样式。

 
  1. @Entry
  2. @Component
  3. struct FancyUse {
  4. @State label: string = 'Hello World'
  5. build() {
  6. Row({ space: 10 }) {
  7. Text(`${this.label}`)
  8. .fontStyle(FontStyle.Italic)
  9. .fontWeight(100)
  10. .backgroundColor(Color.Blue)
  11. Text(`${this.label}`)
  12. .fontStyle(FontStyle.Italic)
  13. .fontWeight(200)
  14. .backgroundColor(Color.Pink)
  15. Text(`${this.label}`)
  16. .fontStyle(FontStyle.Italic)
  17. .fontWeight(300)
  18. .backgroundColor(Color.Orange)
  19. }.margin('20%')
  20. }
  21. }

@Extend将样式组合复用,示例如下。

 
  1. @Extend(Text) function fancyText(weightValue: number, color: Color) {
  2. .fontStyle(FontStyle.Italic)
  3. .fontWeight(weightValue)
  4. .backgroundColor(color)
  5. }

通过@Extend组合样式后,使得代码更加简洁,增强可读性。

 
  1. @Entry
  2. @Component
  3. struct FancyUse {
  4. @State label: string = 'Hello World'
  5. build() {
  6. Row({ space: 10 }) {
  7. Text(`${this.label}`)
  8. .fancyText(100, Color.Blue)
  9. Text(`${this.label}`)
  10. .fancyText(200, Color.Pink)
  11. Text(`${this.label}`)
  12. .fancyText(300, Color.Orange)
  13. }.margin('20%')
  14. }
  15. }

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。 

点击领取→【纯血版鸿蒙全套最新学习资料】(安全链接,放心点击希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取~限时开源!!


 鸿蒙(HarmonyOS NEXT)最新学习路线

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、(南向驱动、嵌入式等)鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。


HarmonyOS Next 最新全套视频教程

 《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

大厂面试必问面试题

鸿蒙南向开发技术

鸿蒙APP开发必备


请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。 

                   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值