鸿蒙装饰器

@Builder装饰器: 自定义构建函数

自定义组件内构建函数

less 复制代码
@Builder function(){...}

调用的时候可以直接使用this.function()使用

自定义组件内@Builder方法个数不限制,可以在build()函数内调用,也可以在其他自定义函数,但是不能在组件外调用。

全局自定义构建函数

less 复制代码
@Builder function GlobalBuilderFunction(){...}

使用方法GlobalBuilderFunction() 可以被整个应用获取,不允许使用thisbind方法。

如果不涉及组件状态变化,建议使用全局自定义构建方法

参数传递规则

参数的传递主要有两种:按值传递按引用传递两种。

参数的类型必须与声明的类型保持一致。

在自定义构建函数内部,不允许改变参数值。如果需要改变参数值,且同步回调用点,建议使用@Link

按引用传递参数

传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内部的UI刷新。

ArkUI提供 $$作为按引用传递参数的范式

按值传递参数

调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量的时候,状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递

@BuildeParam装饰器:引用@Builder函数

用来装饰指向@Builder方法的变量,可以在初始化自定义组件时对属性进行复制,为自定义组件增加特定的功能。

这个装饰器用于声明任意UI描述的一个元素,类似slot占位符。

初始化@BuilderParam装饰的方法

@BuilderParam装饰的方法只能被@Builder装饰的方法初始化(自定义构建函数)。

参数初始化组件

@BuilderParam装饰的放大可以是有参数和无参数的两种形式,需与指向的@Builder方法类型匹配。

例如:

less 复制代码
// 我们声明一个全局构建函数
@Builder function overBuilder($$:{label:string}){
...
}
// 这里我们用了按引用传递参数的方式

那么我们被@BuilderParam装饰的变量的参数也要采用这样的形式与之匹配。 例如:

typescript 复制代码
@BuilderParam customBuilderParam:($$:{label:string}) => void

尾随闭包初始化组件

就是在初始化自定义组件的时候,组件后紧跟一个大括号{}形成尾随闭包场景。

@Styles装饰器:定义组件重用样式

我们可以理解为这个装饰器可以把我们开发中组件重复的样式设置代码进行抽离成一个方法。

使用说明

  • 当前@Styles仅支持通用属性和通用事件
  • @Styles方法不支持带参数
  • @Styles可以定义在组件内或全局,在全局定义时需要在方法前添加function关键字。和自定义构建函数是一样的
  • 定义在组件内的@Styles可以通过this访问组件的常量和状态变量,并可以在@Styles里通过时间来改变状态变量的值
  • 组件内的@Styles优先级高于全局@Styles,框架优先找当前组件内的@Styles,如果找不到,则会全局查找

@Extend装饰器:定义扩展组件样式

使用说明

语法

java 复制代码
@Extend(UIcompinentName) function functionName{...}

使用规则

  • @Extend仅支持定义在全局,不支持组件内定义
  • @Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法
  • @Extend支持代参数,参数可以为function,也可以为状态变量(当状态变量改变的时候,UI可以正常被帅鑫渲染)

stateStyles:多态样式

概述

stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但是语法不同。 ArkUI提供以下四种状态:

  • focused : 获焦态
  • normal :正常态
  • pressed: 按压态
  • disabled : 不可用态
    这样我们就可以通过组件的不同状态对组件进行不同状态下的样式设置,也可以配合着@Styles装饰器一起使用
相关推荐
HarmonyOS_SDK1 小时前
几行代码配置高频按钮,保障用户体验一致
harmonyos
邹荣乐6 小时前
鸿蒙HarmonyOS开发:多种内置弹窗及自定义弹窗的详细使用指南
harmonyos
别说我什么都不会9 小时前
【仓颉三方库】图像处理库 —— gifdrawable4cj
harmonyos
彭不懂赶紧问9 小时前
鸿蒙NEXT开发浅进阶到精通04:类似支付宝横向导航栏与list组件联动随航
前端·harmonyos
HarmonyOS小助手9 小时前
如何用DevEco Studio的ArkUI Inspector轻松搞定鸿蒙应用UI布局
harmonyos·鸿蒙·deveco studio·harmonyos next·arkui inspector
hellojackjiang201111 小时前
全平台开源即时通讯IM框架MobileIMSDK:7端+TCP/UDP/WebSocket协议,鸿蒙NEXT端已发布,5.7K Stars
网络·harmonyos·即时通讯·im开发
特立独行的猫a17 小时前
HarmonyOS NEXT 诗词元服务项目开发上架全流程实战(一、项目介绍及实现效果)
华为·harmonyos·元服务·上架
云和数据.ChenGuang20 小时前
鸿蒙版电影app设计开发
华为·harmonyos·鸿蒙·鸿蒙系统
Bruce_Liuxiaowei21 小时前
HarmonyOS Next~鸿蒙系统UI创新实践:原生精致理念下的设计革命
ui·华为·harmonyos
SuperHeroWu71 天前
【HarmonyOS 5】鸿蒙检测系统完整性
华为·harmonyos·模拟器·系统完整性·越狱设备