HarmonyOS：@LocalBuilder装饰器： 维持组件父子关系

一、前言

当开发者使用@Builder做引用数据传递时，会考虑组件的父子关系，使用了bind(this)之后，组件的父子关系和状态管理的父子关系并不一致。为了解决组件的父子关系和状态管理的父子关系保持一致的问题，引入@LocalBuilder装饰器。@LocalBuilder拥有和局部@Builder相同的功能，且比局部@Builder能够更好的确定组件的父子关系和状态管理的父子关系。

在阅读本文档前，建议提前阅读：@Builder。

说明
从API version 12开始支持。

二、装饰器使用说明

2.1 自定义组件内自定义构建函数

定义的语法：

@LocalBuilder MyBuilderFunction() { ... }

使用方法

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

三、限制条件

  • @LocalBuilder只能在所属组件内声明，不允许全局声明。
  • @LocalBuilder不能被内置装饰器和自定义装饰器使用。
  • 自定义组件内的静态方法不能和@LocalBuilder一起使用。

四、@LocalBuilder和局部@Builder使用区别

@Builder方法引用传参时，为了改变this指向，使用bind(this)后，会导致组件的父子关系和状态管理的父子关系不一致，但
@LocalBuilder是否使用bind(this)，都不会改变组件的父子关系。@LocalBuilder和@Builder区别说明。

五、参数传递规则

@LocalBuilder函数的参数传递有按值传递和按引用传递两种，均需遵守以下规则：

  • 参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。
  • 在@LocalBuilder修饰的函数内部，不允许改变参数值。
  • @LocalBuilder内UI语法遵循UI语法规则。
  • 只有传入一个参数，且参数需要直接传入对象字面量才会按引用传递该参数，其余传递方式均为按值传递。
5.1 按引用传递参数

按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@LocalBuilder方法内的UI刷新。

若子组件调用父组件的@LocalBuilder函数，传入的参数发生变化，不会引起@LocalBuilder方法内的UI刷新。

使用场景：

组件TestLocalBuilder内的@LocalBuilder方法在build函数内调用，按键值对写法进行传值，当点击Click me 时，@LocalBuilder内的Text文本内容会随着状态变量内容的改变而改变。

class ReferenceType {paramString: string = '';
}@Entry
@Component
struct TestLocalBuilder {@State variableValue: string = 'Hello World';@LocalBuilderciteLocalBuilder(params: ReferenceType) {Row() {Text(`UseStateVarByReference: ${params.paramString} `)}};build() {Column({ space: 10 }) {this.citeLocalBuilder({ paramString: this.variableValue });Button('Click me').onClick(() => {this.variableValue = 'Hi World';})}.padding(20)}
}

效果图

在这里插入图片描述

按引用传递参数时，如果在@LocalBuilder方法内调用自定义组件，ArkUI提供$$作为按引用传递参数的范式。

使用场景：

组件TestLocalBuilder1内的@LocalBuilder方法内调用自定义组件，且按照引用传递参数将值传递到自定义组件，当Parent组件内状态变量值发生变化时，@LocalBuilder方法内的自定义组件HelloComponent的message值也会发生变化。

class ReferenceType2 {paramString: string = '';
}@Component
struct HelloComponent22 {@Prop message: string;build() {Row() {Text(`HelloComponent===${this.message}`);}}
}@Entry
@Component
struct TestLocalBuilder2 {@State variableValue: string = 'Hello World';@LocalBuilderciteLocalBuilder($$: ReferenceType2) {Row() {Column() {Text(`citeLocalBuilder===${$$.paramString}`);HelloComponent22({ message: $$.paramString });}}}build() {Column({ space: 10 }) {this.citeLocalBuilder({ paramString: this.variableValue });Button('Click me').onClick(() => {this.variableValue = 'Hi World';})}}
}

效果图

在这里插入图片描述

子组件引用父组件的@LocalBuilder函数，传入的参数为状态变量，状态变量的改变不会引发@LocalBuilder方法内的UI刷新，原因是@Localbuilder装饰的函数绑定在父组件上，状态变量刷新机制是刷新本组件以及其子组件，对父组件无影响，故无法引发刷新。若使用@Builder修饰则可引发刷新，原因是@Builder改变了函数的this指向，此时函数被绑定到子组件上，故能引发UI刷新。

使用场景：

组件Child将@State修饰的label值按照函数传参方式传递到Parent的@Builder和@LocalBuilder函数内，在被@Builder修饰的函数内，this指向Child，参数变化能引发UI刷新，在被@LocalBuilder修饰的函数内，this指向Parent，参数变化不能引发UI刷新。

class LayoutSize3 {size:number = 0;
}@Entry
@Component
struct TestLocalBuilder3 {label:string = 'parent';@State layoutSize:LayoutSize3 = {size:0};@LocalBuilder// @BuildercomponentBuilder($$:LayoutSize3) {Text(`${'this :'+this.label}`);Text(`${'size :'+$$.size}`);}build() {Column() {Child33({contentBuilder: this.componentBuilder });}}
}@Component
struct Child33 {label:string = 'child';@BuilderParam contentBuilder:((layoutSize: LayoutSize3) => void);@State layoutSize:LayoutSize3 = {size:0};build() {Column() {this.contentBuilder({size: this.layoutSize.size});Button("add child size").onClick(()=>{this.layoutSize.size += 1;})}}
}

效果图

在这里插入图片描述

使用@Builder参数变化可以引发UI刷新

在这里插入图片描述

六、按值传递参数

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

使用场景：

组件Parent将@State修饰的label值按照函数传参方式传递到@LocalBuilder函数内，此时@LocalBuilder函数获取到的值为普通变量值，所以改变@State修饰的label值时，@LocalBuilder函数内的值不会发生改变。

@Entry
@Component
struct TestLocalBuilder4 {@State label: string = 'Hello';@LocalBuilderciteLocalBuilder(paramA1: string) {Row() {Text(`UseStateVarByValue: ${paramA1} `)}}build() {Column({space: 10}) {this.citeLocalBuilder(this.label);Button("点击改变@State修饰的label值").onClick(()=>{this.label = "word";console.log(`点击 改变@State修饰的label值 ，  this.label = ${ this.label}`);})}}
}

效果图

在这里插入图片描述

七、@LocalBuilder和@Builder区别说明

函数componentBuilder被@Builder修饰时，显示效果是 “Child”，函数componentBuilder被@LocalBuilder修饰时，显示效果是“Parent”。

说明：

@Builder componentBuilder()通过this.componentBuilder的形式传给子组件@BuilderParam customBuilderParam，this指向在Child的label，即“Child”。

@LocalBuilder componentBuilder()通过this.componentBuilder的形式传给子组件@BuilderParam customBuilderParam，this指向Parent的label，即“Parent”。

@Component
struct Child5 {label: string = `Child5`;@BuilderParam customBuilderParam: () => void;build() {Column() {this.customBuilderParam()}}
}@Entry
@Component
struct TestLocalBuilder5 {label: string = `Parent`;@Builder componentBuilder() {Text(`${this.label}`)}// @LocalBuilder componentBuilder() {//   Text(`${this.label}`)// }build() {Column() {Child5({ customBuilderParam: this.componentBuilder })}}
}

函数componentBuilder被@Builder修饰时，显示效果是 “Child”效果图

在这里插入图片描述

函数componentBuilder被@LocalBuilder修饰时，显示效果是“Parent”效果图

在这里插入图片描述

八、使用场景

@LocalBuilder在@ComponentV2修饰的自定义组件中使用
使用局部的@LocalBuilder在@ComponentV2修饰的自定义组件中调用，修改变量触发UI刷新。

@ObservedV2
class Info6 {@Trace name: string = '';@Trace age: number = 0;
}@ComponentV2
struct ChildPage6 {@Require @Param childInfo: Info6;build() {Column() {Text(`自定义组件 name :${this.childInfo.name}`).fontSize(20).fontWeight(FontWeight.Bold)Text(`自定义组件 age :${this.childInfo.age}`).fontSize(20).fontWeight(FontWeight.Bold)}}
}@Entry
@ComponentV2
struct TestLocalBuilder6 {info1: Info = { name: "Tom", age: 25 };@Local info2: Info = { name: "Tom", age: 25 };@LocalBuilderprivateBuilder() {Column() {Text(`局部LocalBuilder@Builder name :${this.info1.name}`).fontSize(20).fontWeight(FontWeight.Bold)Text(`局部LocalBuilder@Builder age :${this.info1.age}`).fontSize(20).fontWeight(FontWeight.Bold)}}@LocalBuilderprivateBuilderSecond() {Column() {Text(`局部LocalBuilder@Builder name :${this.info2.name}`).fontSize(20).fontWeight(FontWeight.Bold)Text(`局部LocalBuilder@Builder age :${this.info2.age}`).fontSize(20).fontWeight(FontWeight.Bold)}}build() {Column() {Text(`info1: ${this.info1.name}  ${this.info1.age}`) // Text1.fontSize(30).fontWeight(FontWeight.Bold)this.privateBuilder() // 调用局部@BuilderLine().width('100%').height(10).backgroundColor('#000000').margin(10)Text(`info2: ${this.info2.name}  ${this.info2.age}`) // Text1.fontSize(30).fontWeight(FontWeight.Bold)this.privateBuilderSecond() // 调用局部@BuilderLine().width('100%').height(10).backgroundColor('#000000').margin(10)Text(`info1: ${this.info1.name}  ${this.info1.age}`) // Text1.fontSize(30).fontWeight(FontWeight.Bold)ChildPage6({ childInfo: this.info1}) // 调用自定义组件Line().width('100%').height(10).backgroundColor('#000000').margin(10)Text(`info2: ${this.info2.name}  ${this.info2.age}`) // Text2.fontSize(30).fontWeight(FontWeight.Bold)ChildPage6({ childInfo: this.info2}) // 调用自定义组件Line().width('100%').height(10).backgroundColor('#000000').margin(10)Button("change info1&info2").onClick(() => {this.info1 = { name: "Cat", age: 18} // Text1不会刷新，原因是没有装饰器修饰监听不到值的改变。this.info2 = { name: "Cat", age: 18} // Text2会刷新，原因是有装饰器修饰，可以监听到值的改变。})}}
}

效果图

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Elasticsearch—索引库操作(增删查改)

Elasticsearch—索引库操作(增删查改)

Elasticsearch中Index就相当于MySQL中的数据库表 Mapping映射就类似表的结构。 因此我们想要向Elasticsearch中存储数据,必须先创建Index和Mapping 1. Mapping映射属性 Mapping是对索引库中文档的约束，常见的Mapping属性包括： type：字段数据类…
阅读更多...
MySQL进阶突击系列(05)突击MVCC核心原理 | 左右护法ReadView视图和undoLog版本链强强联合

MySQL进阶突击系列(05)突击MVCC核心原理 | 左右护法ReadView视图和undoLog版本链强强联合

2024小结：在写作分享上，这里特别感谢CSDN社区提供平台，支持大家持续学习分享交流，共同进步。社区诚意满满的干货，让大家收获满满。 对我而言，珍惜每一篇投稿分享，每一篇内容字数大概6000字左右&…
阅读更多...
金融项目实战 02|接口测试分析、设计以及实现

金融项目实战 02|接口测试分析、设计以及实现

目录 ⼀、接口相关理论 二、接口测试 1、待测接口：投资业务 2、接口测试流程 3、设计用例理论 1️⃣设计方法 2️⃣工具 4、测试点提取 5、测试用例（只涉及了必测的） 1️⃣注册图⽚验证码、注册短信验证码 2️⃣注册 3️⃣登录 …
阅读更多...
指令的修饰符

指令的修饰符

指令的修饰符 参考文献： Vue的快速上手 Vue指令上 Vue指令下 Vue指令的综合案例 文章目录 指令的修饰符指令修饰符 结语 博客主页: He guolin-CSDN博客 关注我一起学习，一起进步，一起探索编程的无限可能吧！让我们一起努力&…
阅读更多...
[DO374] Ansible 配置文件

[DO374] Ansible 配置文件

[DO374] Ansible 配置文件 1. 配置文件位置2. 配置文件3. Ansible 配置4. Ansible的Ad-hoc5. Ansible 模块6. playbook段落7. 任务执行后续8. Ansible 变量8.1 ansible 变量的定义8.1.1 主机变量8.1.2 主机组变量 8.2 vars的循环 9. Ansible Collection10. Ansible-galaxy 安装…
阅读更多...
STM32如何测量运行的时钟频率

STM32如何测量运行的时钟频率

前言 环境： 芯片：STM32F103C8T6 Keil：V5.24.2.0 一、简介STM32F103C8T6的时钟源 ①HSI 内部高速时钟,RC振荡器，频率为8MHz，精度不高。②HSE 外部高速时钟,可接石英/陶瓷谐振器，频率范围为4MHz~16MHz&…
阅读更多...
【Web安全】SQL 注入攻击技巧详解：UNION 注入（UNION SQL Injection）

【Web安全】SQL 注入攻击技巧详解：UNION 注入（UNION SQL Injection）

【Web安全】SQL 注入攻击技巧详解：UNION 注入（UNION SQL Injection） 引言 UNION注入是一种利用SQL的UNION操作符进行注入攻击的技术。攻击者通过合并两个或多个SELECT语句的结果集，可以获取数据库中未授权的数据。这种注入技术要…
阅读更多...
什么是卷积网络中的平移不变性？平移shft在数据增强中的意义

什么是卷积网络中的平移不变性？平移shft在数据增强中的意义

今天来介绍一下数据增强中的平移shft操作和卷积网络中的平移不变性。 1、什么是平移 Shift 平移是指在数据增强（data augmentation）过程中，通过对输入图像或目标进行位置偏移（平移），让目标在图像中呈现出…
阅读更多...
C#中通道(Channels)的应用之（生产者-消费者模式）

C#中通道(Channels)的应用之（生产者-消费者模式）

一.生产者-消费者模式概述 生产者-消费者模式是一种经典的设计模式，它将数据的生成（生产者）和处理（消费者）分离到不同的模块或线程中。这种模式的核心在于一个共享的缓冲区，生产者将数据放入缓冲区&#x…
阅读更多...
【excel】VBA简介（Visual Basic for Applications）

【excel】VBA简介（Visual Basic for Applications）

文章目录 一、基本概念二、语法2.1 数据类型2.11 基本数据类型2.12 常量2.13 数组 2.2 控制语句2.21 条件语句2.22 循环语句2.23 错误处理：On Error2.24 逻辑运算 2.3 其它语句2.31 注释2.32 with语句 2.4 表达式2.41 常见表达式类型2.42 表达式的优先级 2.5 VBA 的…
阅读更多...
Git：Cherry-Pick 的使用场景及使用流程

Git：Cherry-Pick 的使用场景及使用流程

前面我们说了 Git合并、解决冲突、强行回退等解决方案 >> 点击查看 这里再说一下 Cherry-Pick功能，Cherry-Pick不是merge，只是把部分功能代码Cherry-Pick到远程的目标分支 git cherry-pick功能简介： git cherry-pick 是用来从一个分…
阅读更多...
mysql本地安装和pycharm链接数据库操作

mysql本地安装和pycharm链接数据库操作

MySQL本地安装和相关操作 Python相关：基础、函数、数据类型、面向、模块。 前端开发：HTML、CSS、JavaScript、jQuery。【静态页面】 Java前端； Python前端； Go前端 -> 【动态页面】直观： 静态，写死了…
阅读更多...
数据结构与算法之二叉树: LeetCode 654. 最大二叉树 (Ts版)

数据结构与算法之二叉树: LeetCode 654. 最大二叉树 (Ts版)

最大二叉树 https://leetcode.cn/problems/maximum-binary-tree/ 描述 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点，其值为 nums 中的最大值递归地在最大值 左边 的 子数组前缀上 构建左子树递归地在最大值…
阅读更多...
【Unity高级】一文了解Unity 中的条件编译（附所有指令）

【Unity高级】一文了解Unity 中的条件编译（附所有指令）

一、Unity中的条件编译 Unity 对 C# 语言的支持包括使用指令，这些指令允许您根据是否定义了某些脚本符号，选择性地包含或排除代码的编译。有关这些指令在 C# 中如何工作的更多信息，请参阅微软关于 C# 预处理器指令 的文档。 （一…
阅读更多...
苍穹外卖08——（涉及接收日期格式数据、ApachePOI导出报表、sql获取top10菜品数据）

苍穹外卖08——（涉及接收日期格式数据、ApachePOI导出报表、sql获取top10菜品数据）

营业额统计 service层 在需要处理空值、与数据库交互或使用集合时，Integer 、Double是更好的选择。 // 导入string工具类 import org.apache.commons.lang.StringUtils; Service // 标记该类为Spring的服务组件 Slf4j // 引入日志功能 public class Repor…
阅读更多...
微信小程序订阅消息提醒-云函数

微信小程序订阅消息提醒-云函数

微信小程序消息订阅分2种： 1.一次性订阅：用户订阅一次就可以推送一次，如果需要多次提醒需要多次订阅。 2.长期订阅：只有公共服务领域，如政务、医疗、交通、金融和教育等。‌在用户订阅后，在很长一段时间内…
阅读更多...
代码随想录算法训练营第 4 天（链表 2）| 24. 两两交换链表中的节点19.删除链表的倒数第N个节点 -

代码随想录算法训练营第 4 天（链表 2）| 24. 两两交换链表中的节点19.删除链表的倒数第N个节点 -

一、24. 两两交换链表中的节点 题目：24. 两两交换链表中的节点 - 力扣（LeetCode） 视频：帮你把链表细节学清楚！ | LeetCode：24. 两两交换链表中的节点_哔哩哔哩_bilibili 讲解：代码随想录 dummy-…
阅读更多...
pycharm-pyspark 环境安装

pycharm-pyspark 环境安装

1、环境准备：java、scala、pyspark、python-anaconda、pycharm vi ~/.bash_profile export SCALA_HOME/Users/xunyongsun/Documents/scala-2.13.0 export PATH P A T H : PATH: PATH:SCALA_HOME/bin export SPARK_HOME/Users/xunyongsun/Documents/spark-3.5.4-bin…
阅读更多...
【大模型入门指南 07】量化技术浅析

【大模型入门指南 07】量化技术浅析

【大模型入门指南】系列文章： 【大模型入门指南 01】深度学习入门【大模型入门指南 02】LLM大模型基础知识【大模型入门指南 03】提示词工程【大模型入门指南 04】Transformer结构【大模型入门指南 05】LLM技术选型【大模型入门指南 06】LLM数据预处理【大模型入门…
阅读更多...
3DGabor滤波器实现人脸特征提取

3DGabor滤波器实现人脸特征提取

import cv2 import numpy as np# 定义 Gabor 滤波器的参数 kSize 31 # 滤波器核的大小 g_sigma 3.0 # 高斯包络的标准差 g_theta np.pi / 4 # Gabor 函数的方向 g_lambda 10.0 # 正弦波的波长 g_gamma 0.5 # 空间纵横比 g_psi np.pi / 2 # 相位偏移# 生成 Gabor 滤…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023