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,
          })
      }
    }

    }

相关推荐
程序员潘Sir3 小时前
鸿蒙应用开发从入门到实战(二十一):ArkUI自定义弹窗组件
harmonyos·鸿蒙
前端世界4 小时前
从0到1实现鸿蒙智能设备状态监控:轻量级架构、分布式同步与MQTT实战全解析
分布式·架构·harmonyos
2503_928411564 小时前
10.9 鸿蒙创建和运行项目
android·华为·harmonyos
爱笑的眼睛1114 小时前
深入浅出ArkTS:HarmonyOS应用开发的现代化语法解析
华为·harmonyos
Kisang.1 天前
【HarmonyOS】窗口管理实战指南
前端·华为·typescript·harmonyos·鸿蒙
it技术1 天前
鸿蒙HarmonyOS实战开发系列课程
harmonyos
●VON1 天前
重生之我在大学自学鸿蒙开发第一天-《基础篇》
学习·华为·harmonyos·鸿蒙
浅蓝色1 天前
flutter平台判断后续
flutter·harmonyos
程序员潘Sir1 天前
鸿蒙应用开发从入门到实战(二十):ArkUI内置弹窗组件
harmonyos·鸿蒙