OpenHarmony 入门——ArkUI 自定义组件间的父子双向同步状态装饰器@Link语法(四)

文章大纲

  • 引言
  • 一、组件间状态装饰器@Link 父子双向同步
    • 1、使用规则
    • 2、支持的观察变化的场景和ArkUI 刷新UI
    • 3、@Link变量值初始化和更新机制
      • 3.1、初始渲染:执行父组件的build()函数后将创建子组件的新实例。
      • 3.2、@Link的数据源的更新:即父组件中状态变量更新,引起相关子组件的@Link的更新。
      • 3.2、@Link的更新
  • 二、@Link父子双向同步
    • 1、简单类型和类对象类型的@Link
    • 2、数组类型的@Link

引言

前一篇文章OpenHarmony 入门——ArkUI 自定义组件间父到子单向同步的装饰器@Prop语法(三) 介绍了父组件——>子组件数据同步的装饰器@Prop,今天介绍的是父<——>子双向同步的装饰器@Link.

一、组件间状态装饰器@Link 父子双向同步

父组件中@State, @StorageLink和@Link 和子组件@Link可以建立双向数据同步,@Link 的变量不用初始化。

@Link装饰器不能在@Entry装饰的自定义组件中使用。

1、使用规则

在这里插入图片描述

2、支持的观察变化的场景和ArkUI 刷新UI

  • 当装饰的数据类型为boolean、string、number类型时,可以同步观察到数值的变化。

  • 当装饰的数据类型为class或者Object时,可以观察到赋值和属性赋值的变化,即Object.keys(observedObject)返回的所有属性。

  • 当装饰的对象是array时,可以观察到数组添加、删除、更新数组单元的变化

  • 当装饰的对象是Date时,可以观察到Date整体的赋值,同时可通过调用Date的接口setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds 更新Date的属性。

  • 当装饰的变量是Map时,可以观察到Map整体的赋值,同时可通过调用Map的接口set, clear, delete 更新Map的值。

  • 当装饰的变量是Set时,可以观察到Set整体的赋值,同时可通过调用Set的接口add, clear, delete 更新Set的值。

3、@Link变量值初始化和更新机制

@Link装饰的变量和其所属的自定义组件共享生命周期。父组件和拥有@Link变量的子组件初始渲染和双向更新流程如下(以父组件为@State为例):

3.1、初始渲染:执行父组件的build()函数后将创建子组件的新实例。

初始化过程如下:

  • 必须指定父组件中的@State变量,用于初始化子组件的@Link变量。
  • 子组件的@Link变量值与其父组件的数据源变量保持同步(双向数据同步)。
    父组件的@State状态变量包装类通过构造函数传给子组件,子组件的@Link包装类拿到父组件的@State的状态变量后,将当前@Link包装类this指针注册给父组件的@State变量。

3.2、@Link的数据源的更新:即父组件中状态变量更新,引起相关子组件的@Link的更新。

处理步骤:

  • 通过初始渲染的步骤可知,子组件@Link包装类把当前this指针注册给父组件。
  • 父组件@State变量变更后,会遍历更新所有依赖它的系统组件(elementid)和状态变量(比如@Link包装类)。
  • 通知@Link包装类更新后,子组件中所有依赖@Link状态变量的系统组件(elementId)都会被通知更新。以此实现父组件对子组件的状态数据同步。

3.2、@Link的更新

当子组件中@Link更新后,处理步骤如下(以父组件为@State为例):

  • @Link更新后,调用父组件的@State包装类的set方法,将更新后的数值同步回父组件。
  • 子组件@Link和父组件@State分别遍历依赖的系统组件,进行对应的UI的更新。以此实现子组件@Link同步回父组件@State。

二、@Link父子双向同步

父子双向同步,父组件中@State, @StorageLink和@Link 和子组件@Link可以建立双向数据同步

@Link 的变量不用初始化

1、简单类型和类对象类型的@Link

class GreenButtonState {width: number = 0;constructor(width: number) {this.width = width;}
}
@Component
struct GreenButton {@Link greenButtonState: GreenButtonState;build() {Button('更新Green @Link属性').width(this.greenButtonState.width).height(100.0).backgroundColor('#00ff00').onClick(() => {if (this.greenButtonState.width < 700) {// 更新@Link 修饰的class的属性,变化可以被观察到并同步到父组件this.greenButtonState.width += 125;} else {// 更新class,变化可以被观察到同步回父组件this.greenButtonState = new GreenButtonState(100);}})}
}
@Component
struct YellowButton {@Link yellowButtonState: number;build() {Button('更新子组件的Yellow @Link').width(this.yellowButtonState).height(120.0).backgroundColor('#ffff00').onClick(() => {// 子组件的简单类型可以同步回父组件this.yellowButtonState += 50.0;})}
}@Entry
@Component
struct ShufflingContainer {@State greenButtonState: GreenButtonState = new GreenButtonState(300);@State yellowButtonProp: number = 100;build() {Column() {// 简单类型从父组件@State向子组件@Link数据同步Button('Parent View: Set@#State yellowButton').onClick(() => {this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 100 : 100;})Divider()// class类型从父组件@State向子组件@Link数据同步Button('Parent View: Set@State GreenButton').onClick(() => {this.greenButtonState = new GreenButtonState(80);//this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 100 : 100;})Divider()// class类型初始化@LinkGreenButton({ greenButtonState: this.greenButtonState })// 简单类型初始化@LinkYellowButton({ yellowButtonState: this.yellowButtonProp })}}
}

2、数组类型的@Link

@Component
struct Child2 {@Link items: number[];build() {Column() {Button(`Button1: push`).onClick(() => {this.items.push(this.items.length + 1);})Button(`Button2: replace whole item`).onClick(() => {this.items = [100, 200, 300];})}}
}@Component
struct Parent {@State arr: number[] = [1, 2, 3];build() {Column() {Child2({ items: $arr })ForEach(this.arr,(item:number) => {Text(`${item}`)},(item:number) => item.toString())}}
}

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

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

相关文章

机器学习与数据挖掘_使用梯度下降法训练线性回归模型

目录 实验内容 实验步骤 1. 导入必要的库 2. 加载数据并绘制散点图 3. 设置模型的超参数 4. 实现梯度下降算法 5. 打印训练后的参数和损失值 6. 绘制损失函数随迭代次数的变化图 7. 绘制线性回归拟合曲线 8. 基于训练好的模型进行新样本预测 实验代码 实验结果 实验…

机器学习与AI|如何利用数据科学优化库存周转率?

对于所有零售商来说&#xff0c;良好的库存管理都是非常重要的。众所周知&#xff0c;商品如果不放在货架上就无法出售&#xff0c;而如果库存过多则意味着严重的财务负担。 但是做好库存管理绝非易事&#xff0c;它依赖于对未来需求的准确预测和确保始终有合适库存的敏捷供应链…

Proteus中数码管动态扫描显示不全(已解决)

文章目录 前言解决方法后记 前言 我是直接把以前写的 51 数码管程序复制过来的&#xff0c;当时看的郭天祥的视频&#xff0c;先送段选&#xff0c;消隐后送位选&#xff0c;最后来个 1ms 的延时。 代码在 Proteus 中数码管静态是可以的&#xff0c;动态显示出了问题——显示…

如何快速搭建一个spring boot项目

一、准备工作 1.1 安装JDK&#xff1a;确保计算机上已安装Java Development Kit (JDK) 8或更高版本、并配置了环境变量 1.2 安装Maven&#xff1a;下载并安装Maven构建工具&#xff0c;这是Spring Boot官方推荐的构建工具。 1.3 安装代码编辑器&#xff1a;这里推荐使用Inte…

基于ViT的无监督工业异常检测模型汇总

基于ViT的无监督工业异常检测模型汇总 论文1&#xff1a;RealNet: A Feature Selection Network with Realistic Synthetic Anomaly for Anomaly Detection&#xff08;2024&#xff09;1.1 主要思想1.2 系统框架 论文2&#xff1a;Inpainting Transformer for Anomaly Detecti…

数据结构C语言描述2(图文结合)--有头单链表,无头单链表(两种方法),链表反转、有序链表构建、排序等操作,考研可看

前言 这个专栏将会用纯C实现常用的数据结构和简单的算法&#xff1b;用C基础即可跟着学习&#xff0c;代码均可运行&#xff1b;准备考研的也可跟着写&#xff0c;个人感觉&#xff0c;如果时间充裕&#xff0c;手写一遍比看书、刷题管用很多&#xff0c;这也是本人采用纯C语言…

Python | Leetcode Python题解之第542题01矩阵

题目&#xff1a; 题解&#xff1a; class Solution:def updateMatrix(self, matrix: List[List[int]]) -> List[List[int]]:m, n len(matrix), len(matrix[0])# 初始化动态规划的数组&#xff0c;所有的距离值都设置为一个很大的数dist [[10**9] * n for _ in range(m)]…

ENSP作业——园区网

题目 根据上图&#xff0c;可得需求为&#xff1a; 1.配置交换机上的VLAN及IP地址。 2.设置SW1为VLAN 2/3的主根桥&#xff0c;设置SW2为VLAN 20/30的主根桥&#xff0c;且两台交换机互为主备。 3.可以使用super vlan。 4.上层通过静态路由协议完成数据通信过程。 5.AR1作为企…

【1个月速成Java】基于Android平台开发个人记账app学习日记——第7天,申请阿里云SMS短信服务SDK

系列专栏链接如下&#xff0c;方便跟进&#xff1a; https://blog.csdn.net/weixin_62588253/category_12821860.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12821860&sharereferPC&sharesourceweixin_62588253&sharefromfrom_link 同时篇幅…

让Apache正确处理不同编码的文件避免中文乱码

安装了apache2.4.39以后&#xff0c;默认编码是UTF-8&#xff0c;不管你文件是什么编码&#xff0c;统统按这个来解析&#xff0c;因此 GB2312编码文件内的中文将显示为乱码。 <!doctype html> <html> <head><meta http-equiv"Content-Type" c…

『Django』初识前后端分离

点赞 + 关注 + 收藏 = 学会了 本文简介 在前面的「Django」系列的文章 中使用的是“前后端不分离”的方式去学习 Django,但现在企业比较流行的开发方式是前后端分离。 简单来说,前后端分离就是把前端和后端的工作分配给2个人做,前端主要负责用户界面的开发,后端主要负责…

探索开放资源上指令微调语言模型的现状

人工智能咨询培训老师叶梓 转载标明出处 开放模型在经过适当的指令调整后&#xff0c;性能可以与最先进的专有模型相媲美。但目前缺乏全面的评估&#xff0c;使得跨模型比较变得困难。来自Allen Institute for AI和华盛顿大学的研究人员们进行了一项全面的研究&#xff0c;探索…

搜维尔科技:【应用】Xsens在荷兰车辆管理局人体工程学评估中的应用

荷兰车辆管理局&#xff08;RDW&#xff09;通过数据驱动的人体工程学评估&#xff0c;将职业健康和安全放在首位。 关键信息 01 改进人体工程学评估&#xff1a;RDW使用Xsens动作捕捉和Scalefit Industrial Athlete进行精确、实时的人体工程学评估&#xff0c;识别并降低与…

文件系统和日志管理 附实验:远程访问第一台虚拟机日志

文件系统和日志管理 文件系统&#xff1a;文件系统提供了一个接口&#xff0c;用户用来访问硬件设备&#xff08;硬盘&#xff09;。 硬件设备上对文件的管理 文件存储在硬盘上&#xff0c;硬盘最小的存储单位是512字节&#xff0c;扇区。 文件在硬盘上的最小存储单位&…

大众汽车合肥社招入职笔试测评SHL题库:综合能力、性格问卷、英语口语真题考什么?

大众汽车合肥社招入职笔试测评包括综合能力测试、性格问卷和英语口语测试。以下是各部分的具体内容&#xff1a; 1. **综合能力测试**&#xff1a; - 这部分测试需要46分钟完成&#xff0c;建议准备计算器和纸笔。 - 测试内容涉及问题解决能力、数值计算能力和逻辑推理能力。 -…

Python进阶之IO操作

文章目录 一、文件的读取二、文件内容的写入三、之操作文件夹四、StringIO与BytesIO 一、文件的读取 在python里面&#xff0c;可以使用open函数来打开文件&#xff0c;具体语法如下&#xff1a; open(filename, mode)filename&#xff1a;文件名&#xff0c;一般包括该文件所…

UE5.4 PCG 自定义PCG蓝图节点

ExecuteWithContext&#xff1a; PointLoopBody&#xff1a; 效果&#xff1a;点密度值与缩放成正比

Transformer和BERT的区别

Transformer和BERT的区别比较表&#xff1a; 两者的位置编码&#xff1a; 为什么要对位置进行编码&#xff1f; Attention提取特征的时候&#xff0c;可以获取全局每个词对之间的关系&#xff0c;但是并没有显式保留时序信息&#xff0c;或者说位置信息。就算打乱序列中token…

Apache Commons Collections 反序列化漏洞

文章目录 前言一、漏洞爆出二、复现环境java集合框架问题JVM反射 三、Apache Commons Collections漏洞原理≤3.2.1CC关键类调用链路POC构造思路POC 前言 Apache Commons Collections是一个扩展了Java标准库里的Collection结构的第三方基础库&#xff0c;它提供了很多强大的数据…

正则表达式1 re.match惰性匹配详解案例

点个关注 re.match() re.match() 函数尝试从字符串的开头开始匹配一个模式&#xff0c;如果匹配成功&#xff0c;返回一个匹配成功的对象&#xff0c;否则返回None。大小写区分&#xff0c;内容匹配不到后面的,只能匹配一个&#xff0c;不能有空格&#xff08;开头匹配&#…