HarmonyOS开发之自定义构建函数

news/2024/9/21 6:17:47/

文章目录

  • 一、@Builder装饰器:自定义构建函数
    • 1.按引用传递参数
    • 2.按值传递参数


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

UI元素复用机制@Builder,该自定义组件内部UI结构固定,仅与使用方进行数据传递,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

@Builder通过按引用传递的方式传入参数,才会触发动态渲染UI,并且参数只能是一个。
@Builder如果传入的参数是两个或两个以上,不会触发动态渲染UI。
@Builder传入的参数中同时包含按值传递按引用传递两种方式,不会触发动态渲染UI。
@Builder的参数必须按照对象字面量的形式,把所需要的属性一一传入,才会触发动态渲染UI。

1.按引用传递参数

按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内的UI刷新。如果在@Builder方法内调用自定义组件,ArkUI提供$$作为按引用传递

class Tmp {paramA1: string = ''
}
//定义一个自定义函数 并且接收参数
//不要理解这个$$什么意思 官方给的,就按照这么使用就好了
@Builder function overBuilder($$: Tmp) {Row() {Column() {Text(`overBuilder===${$$.paramA1}`)//将接收的参数 再传给自定义组件HelloComponent({message: $$.paramA1})}}
}@Component
struct HelloComponent {
//自定义子组件通过 @Prop接受参数 并展示@Prop message: string;build() {Row() {Text(`HelloComponent===${this.message}`)}}
}@Entry
@Component
struct Parent {@State label: string = 'Hello';build() {Column() {//调用 overBuilder 自定义函数,并且往overBuilder传参overBuilder({paramA1: this.label})Button('Click me').onClick(() => {this.label = 'ArkUI';})}}
}

2.按值传递参数

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

@Builder function overBuilder(paramA1: string) {Row() {Text(`UseStateVarByValue: ${paramA1} `)}
}
@Entry
@Component
struct Parent {@State label: string = 'Hello';build() {Column() {overBuilder(this.label)Button('add').onClick(()=>{//label值改变 但是自定义函数中Text不会发生改变this.label ='word'})}}
}

http://www.ppmy.cn/news/1528276.html

相关文章

深入解析代理模式:静态代理、JDK 动态代理和 CGLIB 的全方位对比!

代理模式(Proxy Pattern)是一种结构型设计模式,它提供了对象的替身,即代理对象来控制对实际对象的访问。通过代理对象,可以在不修改目标对象的情况下,扩展或控制其功能。例如,代理模式可以用于延…

网络安全与国家安全的关系

网络安全与国家安全密切相关,网络安全是国家安全的重要组成部分。网络安全不仅关系到国家的政治安全、经济安全、文化安全、社会安全、军事安全等领域,还直接影响着国家的总体安全观。在信息化时代,网络空间已成为继陆、海、空、天之后的第五…

无人机视角应急救援(人)数据集

无人机视角应急救援(人),两个数据集 part1,使用DJI Phantom 4A拍摄,分辨率为19201080像素。山区场景,图像中人员姿势分为站立、坐着、躺着、行走、奔跑。共1981张图像6500个不同姿势的标记, par…

Pandas中df常用方法介绍

目录 常用方法df.columnsdf.indexdf.valuesdf.Tdf.sort_index()df.sort_values() 案例 常用方法 df.columns df.columns 是 Pandas 中 DataFrame 对象的一个属性,用于获取 DataFrame 中的列标签(列名)。 基本语法如下: df.col…

卡牌抽卡机小程序:市场发展下的创新

今年以来,卡牌成为了行业中的黑马,在国内迅速流行,成为消费者的心头好。小小的卡牌创下了百亿的市场规模,发展前景巨大! 不过,随着卡牌市场的不断增长,市场发展也需要进行创新。线上抽卡机小程…

线阵相机的参数选型计算

一、要求 如果测量物体的宽度为1800mm,精度1毫米、运动速度25000mm/s。 1. 相机分辨率的确定 幅宽与像素的关系:客户要求的幅宽是1800毫米,精度是1毫米。理论上,如果每个像素对应1毫米,那么相机至少需要1800个像素来覆盖整个幅…

FGT-KVM虚拟机安装步骤

根据FortiOS release note要求,KVM要求的安装条件CentOS 6.4 (qemu 0.12.1) or later。 1.安装CentOS 6.5 CentOS-6.5-x86_64-LiveDVD.iso 下载种子: 2.是否支持虚拟机 egrep ‘(vmx|svm)’ --coloralways /proc/cpuinfo [rootlocalhost ~]# egrep ‘(vmx|svm)’…

rabbitmq容器化部署

目录 需求 容器化部署rabbitmq服务 部署服务 验证及访问服务 rabbitmq配置LTS 服务验证 rabbitmq配置集群 部署集群 1、创建一个存放配置文件的目录 2、创建配置文件 3、部署各个节点 集群验证 需求 容器化部署rabbitmq服务 基础版本 系统ubuntu 24,docke…