鸿蒙装饰器

@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装饰器一起使用
相关推荐
Huang兄21 小时前
鸿蒙-List和Grid拖拽排序:仿微信小程序删除效果
harmonyos·arkts·arkui
anyup2 天前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Ranger09292 天前
鸿蒙开发新范式:Gpui
rust·harmonyos
Huang兄2 天前
鸿蒙-深色模式适配
harmonyos·arkts·arkui
SummerKaze4 天前
为鸿蒙开发者写一个 nvm:hmvm 的设计与实现
harmonyos
在人间耕耘5 天前
HarmonyOS Vision Kit 视觉AI实战:把官方 Demo 改造成一套能长期复用的组件库
人工智能·深度学习·harmonyos
王码码20356 天前
Flutter for OpenHarmony:socket_io_client 实时通信的事实标准(Node.js 后端的最佳拍档) 深度解析与鸿蒙适配指南
android·flutter·ui·华为·node.js·harmonyos
HarmonyOS_SDK6 天前
【FAQ】HarmonyOS SDK 闭源开放能力 — Ads Kit
harmonyos
Swift社区6 天前
如何利用 ArkUI 框架优化鸿蒙应用的渲染性能
华为·harmonyos
特立独行的猫a6 天前
uni-app x跨平台开发实战:开发鸿蒙HarmonyOS影视票房榜组件完整实现过程
华为·uni-app·harmonyos·轮播图·uniapp-x