鸿蒙 - arkTs:状态管理

状态 @State:

在声明式UI中,以状态驱动视图更新

  1. 状态(State):指驱动视图更新的数据(被装饰器标记的变量)
  2. 视图(View):基于UI描述渲染得到的用户界面

使用示例:

@Entry
@Component
struct Index {// 使用状态装饰器@State message: string = 'Hello Word'build() {Column(){Text(this.message)}};
}

说明:

  • @State装饰器标记的变量初始化必须有值
  • @State支持Object、Class、string、number、boolean、enum类型以及这些类型的数组
  • 嵌套类型以及数组中的对象属性无法触发视图更新(相当于浅层监听)

父子组件数据同步 @Prop和@Link:

对比:

@Prop@Link
同步类型单向同步双向同步
允许装饰的变量类型
  • @Prop只支持string、number、boolean、enum类型
  • 父组件对象类型,子组件hi对象类型
  • 不可以是数组,any
  • 父子类型一致:string、number、boolean、enum、object、class以及他们的数组
  • 数组中元素增、删、替换会引起刷新
  • 嵌套类型以及数组中的对象属性无法触发视图更新
初始化方式不允许子组件初始化父子间传递,不允许子组件初始化

@Prop使用示例:

PS:@Prop定义的数据在子组件不能初始化

@Entry
@Component
struct Index {@State msg: string = 'Hello Word'build() {Column() {MsgModule({msg:this.msg})Button('更改文案').onClick(()=>{this.msg = 'Hello arkTs'})}}
}@Component
struct MsgModule {@Prop msg:stringbuild(){Text(this.msg).fontSize(30).fontColor('red')}
}

@Link使用示例:

PS:

  • @Link定义的数据在子组件不能初始化
  • @Link定义的数据,父组件在使用时候,去掉"this."且前边加"$"符号
@Entry
@Component
struct Index {@State msg: string = 'Hello Word'build() {Column() {MsgModule({msg: $msg})}}
}@Component
struct MsgModule {@Link msg:stringbuild(){Row(){Text(this.msg).fontSize(30).fontColor('red')Button('更改文案').onClick(()=>{this.msg = 'Hello arkTs'})}}
}

 @Provide和@Consume:(跨组件提供双向的数据同步)

  @Provide定义的数组,其他组件在使用时候直接使用@Consume定义使用,不需要在调用组件时候进行参数传递

使用示例:

@Entry
@Component
struct Index {@Provide msg: string = 'Hello Word'build() {Column() {MsgBtnModule()}}
}@Component
struct MsgBtnModule {build(){Row(){MsgModule()}}
}@Component
struct MsgModule {@Consume msg: stringbuild(){Row(){Text(this.msg).fontSize(30).fontColor('red')Button('更改文案').onClick(()=>{this.msg = 'Hello arkTs'})}}
}

@ObjectLink和@Observed:(涉及嵌套对象或数组元素为对象的场景中进行双向数据同步)

使用示例:

@Observed
class ArrInt {name: string = ""price: number = 0
}@Entry
@Component
struct Index {@State num:number = 0@State arr: ArrInt[] = [{name: '华为 Meta 50',price: 7999},{name: '华为 Meta 60',price: 8999},{name: '华为 Meta 60 pro',price: 9999},]build() {Column() {Text('涨价' + this.num.toString() + '次').fontSize(50).margin(20)ArrModule({num: $num, arr: $arr})}}
}@Component
struct ArrModule {@Link num: number@Link arr: ArrInt[]build(){Row(){List({space: 10}){ForEach(this.arr,(item: ArrInt) => {ListItem(){ArrItemModule({item:item, num: $num})}})}}}
}@Component
struct ArrItemModule {@ObjectLink item: ArrInt@Link num: numberbuild(){Column(){Text(this.item.name).fontSize(30).fontColor('red')Text(this.item.price.toString()).fontSize(30).fontColor('#000')Button('涨价').onClick(()=>{this.num += 1})}}
}

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

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

相关文章

微软发布Azure Pipelines,开源项目可无限制使用CI/CD

微软发布了Azure Pipelines,他们新的CI/CD服务,是Azure DevOps产品的一部分。Azure Pipelines可用于构建、测试和部署工作负载,并可以让各种语言、项目类型和平台协同工作。作为Visual Studio Team Services(VSTS)的后…

Codeforces Round #653 (Div. 3)

A.Required Remainder 二分 #include<iostream> #include<algorithm> using namespace std; int main() {int T;ios::sync_with_stdio(false);cin.tie(0);cout.tie(0);cin>>T;int x,y,n;while(T--){cin>>x>>y>>n;int l0,r(n-y)/x;while(…

【树链剖分】【倍增】宝石(2021GDOI Day2 T1)

正题 luogu 7518 题目大意 给你一棵树&#xff0c;一条路径的价值为&#xff1a;路径上点权以1开始依次递增1的子序列&#xff0c;有q次询问&#xff0c;每次询问一条路径的价值 解题思路 n,m值比较大&#xff0c;对于每次询问只有O(log2n)O(log^2n)O(log2n)的时间 考虑树链…

2020牛客暑期多校训练营(第一场)

文章目录A B-Suffix ArrayB Infinite TreeC DominoD Quadratic FormE Counting Spanning TreesF Infinite String Comparision题意&#xff1a;题解&#xff1a;代码&#xff1a;G BaXianGuoHai, GeXianShenTongH Minimum-cost FlowI 1 or 2J Easy Integration题意题解代码2020…

P4755-Beautiful Pair【笛卡尔树,线段树】

正题 题目链接:https://www.luogu.com.cn/problem/P4755 题目大意 nnn个数字的一个序列&#xff0c;求有多少个点对i,ji,ji,j满足aiaj≤max{ak}(k∈[l,r])a_i\times a_j\leq max\{a_k\}(k\in[l,r])ai​aj​≤max{ak​}(k∈[l,r]) 解题思路 如果构建一棵笛卡尔树的话那么两个点…

C# 接受MQTT服务器推送的消息

前言&#xff1a;MQTT是IBM开发的一个即时通讯协议。MQTT是面向M2M和物联网的连接协议&#xff0c;采用轻量级发布和订阅消息传输机制。大家可以直接上GitHub下载MQQT服务的源码&#xff0c;源码地址&#xff1a;https://github.com/mqtt/mqtt.github.io/wiki/libraries主要内容…

【堆】【DP】Niyaz and Small Degrees(luogu 7600[APIO 2021 T3]/luogu-CF1119F)

正题 luogu 7600[APIO 2021 T3] luogu-CF1119F 题目大意 给你一棵树&#xff0c;给出每条边割掉的代价&#xff0c;问你对于0⩽k<n0\leqslant k<n0⩽k<n&#xff0c;使得每个点的度数小于k的最小代价 解题思路 首先考虑单询问的情况 可以设fx,1/0f_{x,1/0}fx,1/0​…

Boundary(2020多校第二场B)

Boundary&#xff08;2020多校第二场B&#xff09; 文章目录题意&#xff1a;题解&#xff1a;思路1&#xff1a;代码&#xff1a;思路二代码题意&#xff1a; 坐标平面有n个点&#xff08;不与原点&#xff08;0,0&#xff09;重复&#xff09;,现考虑一个圆&#xff0c;&…

.NET Core开发日志——Linux版本的SQL Server

SQL Server 2017版本已经可以在Linux系统上安装&#xff0c;但我在尝试.NET Core跨平台开发的时候使用的是Mac系统&#xff0c;所以这里记录了在Mac上安装SQL Server的过程。最新的SQL Server没有专门为Mac系统准备安装包&#xff0c;但由于Mac系统上支持Docker&#xff0c;所以…

P3313-[SDOI2014]旅行【树链剖分,线段树】

正题 题目链接:https://www.luogu.com.cn/problem/P3313 题目大意 nnn个点的一棵树&#xff0c;每个点有一个颜色和权值&#xff0c;有操作 修改一个点的权值修改一个点的颜色询问一条路径的某颜色的权值和询问一条路径的某颜色的权值最大值 解题思路 询问路径直接树剖先&am…

AIsing Programming Contest 2020 总结

A - Number of Multiples 按照题目意思走就行 #define IO ios::sync_with_stdio(false);cin.tie();cout.tie(0) #include<iostream> #include<algorithm> using namespace std; int l,r,d; int main() {IO;cin>>l>>r>>d;if(r<l) swap(l,r);…

【倍增】【线段树】雨林跳跃(luogu 7599[APIO 2021 T2])

正题 luogu 7599[APIO 2021 T2] 题目大意 给你一排树中每棵树的高度&#xff0c;每次跳跃可以跳到左/右边第一棵比该树高的树&#xff0c;问你从A-B中某棵树跳到C-D中的某棵树的最小步数&#xff08;A⩽B<C⩽DA\leqslant B< C\leqslant DA⩽B<C⩽D&#xff09; 解题…

Duration(2020多校第二场D)

Duration&#xff08;2020多校第二场D&#xff09; 文章目录题意题解代码首先&#xff0c;非常感谢出题人出这个题&#xff0c;避免了我全wa的尴尬题意 求两个时间相差多少秒&#xff0c;两个时间为同一天 题解 全部转化成秒&#xff0c;然后求差 代码 #include<bits/s…

dotnetClub 的前世今生

三年之前&#xff0c;我做过一个在线调查&#xff0c;当时有不少人还是对一个在线社区表示出期待。.NET Core 技术正风声水起&#xff0c;所以我就开始了用它来开发一个论坛的计划。最近正式将项目推动到了一个 MVP 的状态。感兴趣的朋友&#xff0c;现在可以访问 preview.dotn…

P3308-[SDOI2014]LIS【最小割】

正题 题目链接:https://www.luogu.com.cn/problem/P3308 题目大意 三个nnn个数字的序列A,B,CA,B,CA,B,C。要求删除其中某些位置iii使得AAA的最长上升子序列至少减少111且删去位置BBB的权值和最小的情况下满足删去位置的CCC值升序排序后字典序最小。 解题思路 首先BBB值最小很…

Codeforces Round #656 (Div. 3)

A.Three Pairwise Maximums 首先最大的在原序列中肯定出现至少两次否则不能构造&#xff0c;即min max max&#xff0c;对于答案min min max肯定满足题意 #define IO ios::sync_with_stdio(false);cin.tie();cout.tie(0) #include<iostream> #include<algorithm>…

【LCT】网络(luogu 2173/ZJOI2011)

正题 luogu 2173 题目大意 给你一个图&#xff0c;每条边有有一种颜色&#xff08;numcolor⩽10num_{color}\leqslant 10numcolor​⩽10&#xff09;&#xff0c;保证以下性质&#xff1a; 1.一个点连出的同色边数不大于2 2.不存在同色边组成的环 现在让你进行3钟操作&…

【每日一题】7月13日题目精讲—Kingdom

【每日一题】7月13日题目精讲—Kingdom 文章目录题目描述题解&#xff1a;代码:时间限制&#xff1a;C/C 2秒&#xff0c;其他语言4秒 空间限制&#xff1a;C/C 1048576K&#xff0c;其他语言2097152K 64bit IO Format: %lld题目描述 X王国有n位官员&#xff0c;编号从1到n。国…

P3309-[SDOI2014]向量集【线段树,凸壳】

正题 题目链接:https://www.luogu.com.cn/problem/P3309 题目大意 nnn个操作 在序列末尾加入一个向量(x,y)(x,y)(x,y)询问加入的第l∼rl\sim rl∼r个向量中的一个向量和(x,y)(x,y)(x,y)的点积最大值 强制在线&#xff0c;点积的定义为x1x2y1y2x_1x_2y_1y_2x1​x2​y1​y2​ …

CanalSharp-mysql数据库binlog的增量订阅消费组件Canal的.NET客户端

一.前言CanalSharp是阿里巴巴开源项目mysql数据库binlog的增量订阅&消费组件 Canal 的.NET客户端&#xff0c;关于什么是 Canal&#xff1f;又能做什么&#xff1f;我会在后文为大家一一介绍。CanalSharp 这个项目&#xff0c;是由我和 WithLin(主要贡献) 完成&#xff0c;…