Harmony装饰器

1、装饰器

装饰器是用于装饰类、结构、方法以及变量,并赋予其特殊的含义。如:

  • @Component表示自定义组件
  • @Entry表示该自定义组件为入口组件
  • @State表示组件中的状态变量,状态变量变化会触发UI刷新。

2 、语法范式

  • @Builder/@BuilderParam:特殊的封装UI描述的方法,细粒度的封装和复用UI描述,如抽取组件。

    build() {
    Column() {
    Scroll() {
    Column() {
    this.LoginButton()
    }
    }
    .width(Constants.MATCH_PARENT)
    .backgroundColor($r('app.color.app_background'))
    .padding(15)
    }

    复制代码
    @Builder LoginButton() {
      Button($r('app.string.login'))
        .width(Constants.MATCH_PARENT)
        .height(40)
        .borderRadius(20)
        .fontSize(16)
        .margin({ top: 50 })
        .fontWeight(500)
        .enabled(true)
        .fontColor(Color.White)
        .backgroundColor($r('app.color.blue'))
        .onClick(() => {
         
        })
    }
  • @Extend/@Style:扩展内置组件和封装属性样式,更灵活地组合内置组件。

    @Extend 和 @Style的区别:

    1. 和@Styles不同,@Extend仅支持定义在全局,不支持在组件内部定义。
    2. 和@Styles不同,@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。
    3. 和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值调用。
    4. @Extend装饰的方法的参数可以为function,作为Event事件的句柄。
    5. @Extend的参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染。
    6. @Styles方法不支持参数。
    7. @Styles可以定义在组件内或全局,在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。
    8. 定义在组件内的@Styles可以通过this访问组件的常量和状态变量,并可以在@Styles里通过事件来改变状态变量的值。
    9. 组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles,如果找不到,则会全局查找。

    // xxx.ets
    @Extend(Text) function textStyle (fontSize: number) {
    .fontColor(Color.Red)
    .fontSize(fontSize)
    }

    // 定义在全局的@Styles封装的样式
    @Styles function globalText() {
    .width(150)
    .height(100)
    .backgroundColor(Color.Pink)
    }

    @Entry
    @Component
    struct ExtendPage {
    build() {
    Row({ space: 10 }) {
    Text('Extend')
    .textStyle(16)

    复制代码
        Text('Style')
          .globalText()
          .fontSize(30)
      }
    }

    }

  • stateStyles:多态样式,可以依据组件的内部状态的不同,设置不同样式。

    stateStyles是属性方法,可以根据UI内部状态来设置样式。ArkUI提供以下四种状态:

    1. focused:获焦状态。
    2. normal:正常状态。
    3. pressed:按压状态。
    4. disabled:不可用状态。

    // @Styles和stateStyles联合使用

    @Entry
    @Component
    struct MyComponent {
    @Styles normalStyle() {
    .backgroundColor(Color.Gray)
    }

    复制代码
    @Styles pressedStyle() {
      .backgroundColor(Color.Red)
    }
    
    build() {
      Column() {
        Text('Text1')
          .fontSize(50)
          .fontColor(Color.White)
          .stateStyles({
            normal: this.normalStyle,
            pressed: this.pressedStyle,
          })
      }
    }

    }

相关推荐
码是生活12 分钟前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
鸿蒙场景化示例代码技术工程师17 分钟前
基于Canvas实现选座功能鸿蒙示例代码
华为·harmonyos
小脑斧爱吃鱼鱼1 小时前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
鸿蒙布道师2 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang1062092 小时前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
马剑威(威哥爱编程)2 小时前
在HarmonyOS NEXT 开发中,如何指定一个号码,拉起系统拨号页面
华为·harmonyos·arkts
GeniuswongAir4 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
90后的晨仔7 小时前
鸿蒙ArkUI框架中的状态管理
harmonyos
别说我什么都不会1 天前
OpenHarmony 5.0(API 12)关系型数据库relationalStore 新增本地数据变化监听接口介绍
api·harmonyos
MardaWang1 天前
HarmonyOS 5.0.4(16) 版本正式发布,支持wearable类型的设备!
华为·harmonyos