HarmonyOS(六)——@Builder装饰器

前言

前面章节介绍了如何创建一个自定义组件以及认识页面和自定义组件生命周期。明白了自定义组件内部UI结构固定,仅与使用方进行数据传递。同时明白了自定义组件对应生命周期的机制管理。ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

为了简化语言,我们将@Builder装饰的函数也称为“自定义构建函数”。

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

自定义构建函数(装饰器)使用说明

1:自定义组件内自定义构建函数:

定义的语法:

@Builder MyBuilderFunction({ ... })

使用方法:

this.MyBuilderFunction({ ... })
  • 允许在自定义组件内定义一个或多个自定义构建函数,该函数被认为是该组件的私有、特殊类型的成员函数。
  • 自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用,但不允许在组件外调用。
  • 在自定义函数体中,this指代当前所属组件,组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

2:全局自定义构建函数

定义的语法:

@Builder function MyGlobalBuilderFunction({ ... })

使用方法:

MyGlobalBuilderFunction()
  • 全局的自定义构建函数可以被整个应用获取,不允许使用this和bind方法。
  • 如果不涉及组件状态变化,建议使用全局的自定义构建方法。

自定义构建函数参数传递规则

自定义构建函数的参数传递有按值传递和按引用传递两种,均需遵守以下规则:

  • 参数的类型必须与参数声明的类型一致,不允许undefined、null和返回undefined、null的表达式。
  • 在自定义构建函数内部,不允许改变参数值。如果需要改变参数值,且同步回调用点,建议使用@Link。
  • @Builder内UI语法遵循UI语法规则。(详细规则见如何创建自定义组件一文中build()函数描述详细细节)

1:按引用传递参数

按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。

ABuilder( $$ : { paramA1: string, paramB1 : string } );

举个例子:

@Builder function ABuilder($$: { paramA1: string }) {Row() {Text(`UseStateVarByReference: ${$$.paramA1} `)}
}
@Entry
@Component
struct Parent {@State label: string = 'Hello';build() {Column() {// 在Parent组件中调用ABuilder的时候,将this.label引用传递给ABuilderABuilder({ paramA1: this.label })Button('Click me').onClick(() => {// 点击“Click me”后,UI从“Hello”刷新为“ArkUI”this.label = 'ArkUI';})}}
}

2:按值传递参数

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

举个例子:

@Builder function ABuilder(paramA1: string) {Row() {Text(`UseStateVarByValue: ${paramA1} `)}
}
@Entry
@Component
struct Parent {label: string = 'Hello';build() {Column() {ABuilder(this.label)}}
}

总结

  1. @Builder装饰器一种更轻量的UI元素复用机制,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。
  2. @Builder装饰的函数也称为“自定义构建函数”。“自定义构建函数”又分为“自定义组件内自定义构建函数”和“全局自定义构建函数”,俩种构建函数使用机制不同,日常开发中我们可以更具俩种构建函数特性灵活选择使用那种类型的构建函数。
  3. 自定义构建函数的参数传递有按值传递和按引用传递两种,均需遵守对应规则,具体规则见本文参数传递规则一节。
  4. 按值传递和按引用传递使用时机不同,当使用状态变量的时候,推荐使用按引用传递。反之使用按值传递。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS7部署FTP服务器

首先准备一台centos7虚拟机,作为服务器IP地址必须是固定的。 vim /etc/sysconfig/network-scripts/ifcfg-ens33配置内容如下: TYPE"Ethernet" PROXY_METHOD"none" BROWSER_ONLY"no" BOOTPROTO"static" DEFROU…

【Vue3+Vite】解决build后空白页的问题

目录 Hash 模式 HTML5 模式(历史模式) 配置Nginx 配置Spring Boot Hash 模式 build后空白页的问题可能是使用的是历史模式,因为Vue是一个单页的客户端应用,如果没有适当的服务器配置,访问会得到一个 404 错误…

【研究中2】sql server权限用户设置

--更新时间2023.11.26 21:30 负责人:jerrysuse DBAliCMSIF EXISTS (select * from sysobjects where namehkcms_admin)--判断是否存在此表DROP TABLE hkcms_adminCREATE TABLE hkcms_admin (id int identity(1, 1),--id int primary key identity…

静态路由配置过程

静态路由 静态路由简介 路由器在转发数据时,要先在路由表(Routing Table)中在找相应的路由,才能知道数据包应该从哪个端口转发出去。路由器建立路由表基本上有以下三种途径。 (1)直连路由:路由…

HDMI接口信号流向及原理图分析

1、HDMI的来源及发展 如今显示器上最常用的接口无非HDMI(High Definition Multimedia Interface)与DP(DisplayPort)两种,VGA与DVI已经很少使用,原因在于VGA传输的是模拟信号,在发送端需要将数字…

C++前缀和算法:统计美丽子字符串

题目 给你一个字符串 s 和一个正整数 k 。 用 vowels 和 consonants 分别表示字符串中元音字母和辅音字母的数量。 如果某个字符串满足以下条件,则称其为 美丽字符串 : vowels consonants,即元音字母和辅音字母的数量相等。 (vowels * cons…

Jenkins与Docker的自动化CI/CD流水线实践

Pipeline 有诸多优点,例如: 项目发布可视化,明确阶段,方便处理问题 一个Jenkins File文件管理整个项目生命周期 Jenkins File可以放到项目代码中版本管理 Jenkins管理界面 操作实例:Pipeline的简单使用 这里是比较…

设计模式-迭代器模式

定义 迭代器模式是一种行为型设计模式,它提供一种按顺序访问聚合对象中的元素的方法,而又无须暴露聚合对象的内部表示。迭代器模式通过将集合对象的迭代行为抽象到迭代器中,提供一致的接口,使得不同的容器可以提供一致的遍历行为…

elastic -job和springboot集成实现分布式调度5

一 案例介绍说明 1.1 案例介绍 基于 Spring boot 集成方式的而产出的工程代码,完成对作业分片的实现,文件数据备份采取更接近真实项目的数 据库存取方式。 1.分片设置 2.每个线程获取给自的类型 1.2 作业配置 zk的配置 二 操作说明 2.1 数据表的初始…

深入理解计算机中的程序

目录 程序的存储 程序的编译过程 各位宝宝好&#xff0c;我们这次从计算机底层来讲一下程序是如何存储&#xff0c;编译的 程序的存储 我们拿一个最简单的程序来举个例子&#xff1a; #include<stdio.h> int main() {printf("hello world");return 0; } …

类与对象(下)

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生&#x1f43b;‍❄个人主页&#x1f389;&#xff1a;GOTXX&#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&a…

设计模式精讲:掌握单例模式的实现与优化

掌握单例模式的实现与优化 一、引言&#xff1a;如何学习设计模式&#xff1f;二、前置知识&#xff1a;对象的创建的销毁2.1、拷贝构造2.2、拷贝赋值构造2.3、移动构造2.4、移动赋值构造 三、单例模式的定义四、单例模式的实现与优化4.1、版本一4.2、版本二4.3、版本三4.4、版…

TypeScript中的“as”语法是什么?

在TypeScript中&#xff0c;as是一种类型断言的语法。它用于告诉编译器某个值的类型&#xff0c;并强制将其视为指定的类型。这可以用于处理类型检查无法确定的情况&#xff0c;或者在开发者明确知道某个值的类型时。 as语法可以在以下情况下使用&#xff1a; 当开发者确定某…

ros2智能小车中STM32地盘需要用到PWM的模块

我做的地盘比较简单&#xff0c;使用了一下模块&#xff1a; 4个直流减速电机&#xff0c;&#xff08;每个模块用到了一个PWM&#xff09;---这会通过L298N的ENA,ENB来实现控制 光电对射测速模块&#xff08;不用PWM) 超声波测距模块&#xff08;不用PWM&#xff0c;只需要…

传统数仓和clickhouse对比

背景 传统数仓一般都是HiveSparkSql作为代表&#xff0c;不过也包括Kylin等&#xff0c;而clickhouse是实时OLAP的代表&#xff0c;我们简单看下他们的对比 传统数仓和clickhouse对比 HiveSparkSQL的传统数仓&#xff1a; 1.数据更新速度慢&#xff0c;由于传统数仓一般都是…

靡靡之音 天籁之声 ——Adobe Audition

上一期讲到了和Pr配合使用的字幕插件Arctime Pro的相关介绍。相信还记得的小伙伴应该记得我还提到过一个软件叫做Au。 当人们对字幕需求的逐渐满足&#xff0c;我们便开始追求更高层次的享受&#xff0c;当视觉享受在进步&#xff0c;听觉享受想必也不能被落下&#xff01; Au即…

NX二次开发UF_CURVE_ask_offset_parms 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_offset_parms Defined in: uf_curve.h int UF_CURVE_ask_offset_parms(tag_t offset_curve_object, UF_CURVE_offset_data_p_t offset_data_pointer ) overview 概述 …

什么是好的FPGA编码风格?(3)--尽量不要使用锁存器Latch

前言 在FPGA设计中&#xff0c;几乎没人会主动使用锁存器Latch&#xff0c;但有时候不知不觉中你的设计莫名其妙地就生成了一堆Latch&#xff0c;而这些Latch可能会给你带来巨大的麻烦。 什么是锁存器Latch&#xff1f; Latch&#xff0c;锁存器&#xff0c;一种可以存储电路…

Spring Boot 项目配置文件出现乱码的解决方法

如下图&#xff0c;我们 Spring Boot 项目的配置文件 application.properties 可能会出现如下的乱码问题&#xff1a; 我们写注解的时候是正常的&#xff0c;但是下次启动项目就出现了乱码&#xff0c;这个是字符集设置的问题 解决方法 1.点击 File 选择 Settings 2.搜索 enco…

Grabcut算法在图片分割中的应用

GrabCut算法原理 Grabcut是基于图割(graph cut)实现的图像分割算法&#xff0c;它需要用户输入一个bounding box作为分割目标位置&#xff0c;实现对目标与背景的分离/分割&#xff0c;与KMeans与MeanShift等图像分割方法不同。 Grabcut分割速度快&#xff0c;效果好&#xff0…