华为HarmonyOS NEXT 原生应用开发:鸿蒙中组件的组件状态管理、组件通信 组件状态管理小案例(好友录)!

文章目录

  • 组件状态管理
      • 一、@State装饰器
          • 1. @State装饰器的特点
          • 2. @State装饰器的使用
      • 二、@Prop装饰器(父子单向通信)
          • 1. @Prop装饰器的特点
          • 2. @Prop装饰器的使用示例
      • 三、@Link装饰器(父子双向通信)
          • 1. @Link装饰器的特点
          • 3. @Link使用示例
      • 四、@Provide/@Consume装饰器(祖孙后代双向通信)
          • 1. 特点
          • 2. 使用条件
      • 五、@Observed装饰器和@ObjectLink装饰器
          • 1. 特点:
          • 2. 使用说明
          • 代码示例:
      • 六、拓展装饰器
      • 组件状态管理案例练习 - 好友录

组件状态管理

一、@State装饰器

1. @State装饰器的特点

● @State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步,与@Link、@ObjectLink装饰变量之间建立双向数据同步。
● @State装饰的变量生命周期与其所属自定义组件的生命周期相同

2. @State装饰器的使用
  • 简单示例:

以下示例为@State装饰的简单类型,count被@State装饰成为状态变量,count的改变引起Button组件的刷新:
● 当状态变量count改变时,查询到只有Button组件关联了它;
● 执行Button组件的更新方法,实现按需刷新。

@Entry
@Component
struct MyComponent {@State count: number = 0;build() {Button(`click times: ${this.count}`).onClick(() => {this.count += 1;})}
}
  • 该装饰器修饰的变量将别 UI 框架监视。
  • 需要注意,该变量访问权只在该组件中,且必须初始化。

二、@Prop装饰器(父子单向通信)

1. @Prop装饰器的特点

● 传递的是数据的深拷贝,每次都会拷贝数据源然后流转到子组件, 并且支持嵌套传递。
在父子组件中,使用该装饰器实现单向数据流。
● 父组件:数据源修改数据,@Prop修饰的变量都会进行覆盖变化。
● 子组件:对@Prop修饰的变量进行数据修改,并不会影响到父组件(数据源)。

在这里插入图片描述

2. @Prop装饰器的使用示例
  • 父组件发生变化,数据流向子组件,实现单向同步,而子组件修改数据,不影响父组件数据源。子组件你数据使劲修改,父组件最终修改数据,都会同步到子组件!

在这里插入图片描述

@Entry
@Component
struct CStatusPage {@State age: number = 0build() {Column({ space: 20 }) {Column({ space: 20 }) {Text("父组件: " + this.age).fontSize(20)// 给子组件传参ChildComponent({age: this.age})}.width("50%").height(200).justifyContent(FlexAlign.Center).padding(20).backgroundColor(Color.Pink)Row({space: 100 }) {Button("父组件 + 1").onClick(() => {this.age++})}.width("100%").justifyContent(FlexAlign.Center)}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}@Component
struct ChildComponent {// 接收父组件参数@Prop age: number = 0build() {Column() {Row() {Text("子组件:" + this.age).fontSize(18)}.width("80%").height(100).backgroundColor(Color.Green)Button("子组件 + 1").onClick(() => {this.age++})}}
}

三、@Link装饰器(父子双向通信)

1. @Link装饰器的特点

双向数据流:@Link装饰的变量与其父组件中的数据源共享相同的值。
● 浅拷贝,直接将引用地址进行共享,同样支持嵌套。

  • 限制条件
    ● @Link装饰器不能在@Entry装饰的组件中使用。
    ● 禁止子组件在本地初始化数据(父类数据直接流到子类,允许访问和修改,若是赋值就没有意义)。
    ● 私有,只能在所属组件内访问。
3. @Link使用示例

和上方 @Prop 大差不差,@Link 是双向数据流,父组件可以修改子,子也可以修改父组件。

@Entry
@Component
struct CStatusPage {@State age: number = 0build() {Column({ space: 20 }) {Column({ space: 20 }) {Text("父组件: " + this.age).fontSize(20)// 给子组件传参ChildComponent({age: this.age})}.width("50%").height(200).justifyContent(FlexAlign.Center).padding(20).backgroundColor(Color.Pink)Row({space: 100 }) {Button("父组件 + 1").onClick(() => {this.age++})}.width("100%").justifyContent(FlexAlign.Center)}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}@Component
struct ChildComponent {// 接收父组件参数 (需要注意不能有初始值,因为和父组件共享一份,有初始值就没有意义了)@Link age: numberbuild() {Column() {Row() {Text("子组件:" + this.age).fontSize(18)}.width("80%").height(100).backgroundColor(Color.Green)Button("子组件 + 1").onClick(() => {this.age++})}}
}

四、@Provide/@Consume装饰器(祖孙后代双向通信)

1. 特点

双向数据流、UI框架可以跨多层检测。
使用场景: 一般在一个组件中嵌套两层一及以上的组件使用,否则直接用@Link就可以解决一层父子通信的问题。

@Provide:@Provide装饰的状态变量自动对其所有后代组件可用.

@Consume:后代通过使用@Consume去获取@Provide提供的变量,建立在@Provide和@Consume之间的双向数据同步,与@State/@Link不同的是,他是多层级的父子组件之间传递。

2. 使用条件

使用说明:熟

  1. @Consume修饰的状态变量不能主动初始化,只能接受祖先Provide的初始化
  2. @Provide修饰的状态变量必须初始化,可以用于初始化子组件,但不能被父组件初始化。
  3. 两个组件之间状态变量名和类型需要保持一致。
  4. 组件内变量名同名了(当然,进行取别名 @Consume(“别名”)),子组件直接使用别名即可! @Provide(“别名”),子组件同样直接使用别名。
    需要注意:随着新版本的更新优化,组组件有别名的子组件就用别名,有的子组件用了父组件原名的就用其原名,不相互影响。
  • 祖先组件代码
import { SonComponents } from '../components/SonComponents'
@Entry
@Component
struct Index {@State message: string = 'component1';@Provide user: string = 'admin'build() {Column({ space: 50}) {Text(this.message).fontSize(50)Row() {SonComponents()}}.height('100%').width('100%')}
}
  • 第一层组件代码
import { Sun } from '../components/Sun'
@Component
export struct SonComponents {build() {Column() {Text('SonComponents2').fontSize(40)Sun()}.width('100%').height('100%')}
}
  • 第三层组件代码
@Component
export struct Sun {@Consume user: stringbuild() {Column() {Text(this.user).fontSize(40)}.width('100%').height('100%')}
}

在这里插入图片描述

五、@Observed装饰器和@ObjectLink装饰器

1. 特点:

在这里插入图片描述

2. 使用说明

● @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。
● @ObjectLink中的属性可以被修改,但是不能直接覆盖自身

代码示例:
// 允许@ObjectLink装饰的数据属性赋值
this.objLink.a= ...
// 不允许@ObjectLink装饰的数据自身赋值
this.objLink= ...
class ClassA {public c: number;constructor(c: number) {this.c = c;}
}@Observed
class ClassB {public a: ClassA;public b: number;constructor(a: ClassA, b: number) {this.a = a;this.b = b;}
}
  • ClassB被@Observed装饰,其成员变量的赋值的变化是可以被观察到的,但对于ClassA,没有被@Observed装饰,其属性的修改不能被观察到。
@ObjectLink b: ClassB// 赋值变化可以被观察到
this.b.a = new ClassA(5)
this.b.b = 5// ClassA类没有被@Observed装饰,嵌套在ClassB类中其属性的变化观察不到
this.b.a.c = 5

六、拓展装饰器

@Require修饰符
● 主要用于数据参数校验,添加该修饰符后,必须传递参数,故此也可以不给初始值。
@Track修饰符 (主要用于做新能优化的)

在这里插入图片描述

组件状态管理案例练习 - 好友录

  • 可以跟着源码写一遍熟悉一下,主要练习组件通信。

在这里插入图片描述

  • 数据模型文件源码
let nextId = 1// 随机姓名数组
const NameArr: string[] = ["子涵", "天宇", "雨欣", "晨曦", "思琪", "佳怡", "子轩", "浩然", "梦洁","文博", "子涵", "明轩", "诗涵", "子轩", "明轩", "子涵", "天宇", "雨欣","晨曦", "思琪", "佳怡", "子轩", "浩然", "梦洁", "文博", "诗涵", "子轩","明轩", "子涵", "天宇", "雨欣", "晨曦", "思琪", "佳怡", "子轩", "浩然","梦洁", "文博", "诗涵", "子轩", "明轩", "子涵", "天宇", "雨欣", "晨曦","思琪", "佳怡", "子轩", "浩然", "梦洁", "文博", "诗涵", "子轩", "明轩","子涵", "天宇", "雨欣", "晨曦", "思琪", "佳怡", "子轩", "浩然", "梦洁","文博", "诗涵", "子轩", "明轩", "子涵", "天宇", "雨欣", "晨曦", "思琪","佳怡", "子轩", "浩然", "梦洁", "文博", "诗涵", "子轩", "明轩", "小欣","梦洁", "文博", "诗涵", "子轩", "明轩", "子涵", "天宇", "雨欣", "晨曦","思琪", "佳怡", "子轩", "浩然", "梦洁", "文博", "诗涵", "子轩", "明轩","欣姚"
]
// 随机生成的 手机号码@Observed
export class Person {id: numbername: stringphone: stringisStar: boolean = falseconstructor(name: string, phone: string) {this.id = nextId++this.name = namethis.phone = phone}
}export function getPhonePerson (): Person {let personArr = new Person(randomNameHandle(), randomPhoneNumberHandle())return personArr
}// 随机生成姓名
export function randomNameHandle(): string {let name: string = ""let randomNameNumber: number = Math.floor(Math.random() * 100 )name = NameArr[randomNameNumber]return name
}// 生成随机的手机号
export function randomPhoneNumberHandle(): string {// 生成 11 位随机数字let phoneNumber = '';for (let i = 0; i < 11; i++) {phoneNumber += Math.floor(Math.random() * 10).toString();}return phoneNumber;
}
  • index文件源码
import { Person, getPhonePerson } from "./model/DataModel"
import { promptAction } from '@kit.ArkUI'@Entry
@Component
struct Index {// 当前的id值@State PhonePerson: Person[] = [getPhonePerson(), getPhonePerson(), getPhonePerson()]// id容器,我需要得到子组件给我的当前id值@State currentContactID: number = -1// false 选择, true 取消@State titleTextBoolean: boolean = false@State deleteArrList: number[] = []build () {Column() {// 标题Row({ space: 10 }) {Text('联系人').fontSize(24).fontWeight(FontWeight.Bold)Blank()Button(this.titleTextBoolean ? "取消" : "选择").fontColor(Color.White).fontSize(14).backgroundColor(this.titleTextBoolean ? Color.Red : "#007dfe").onClick(() => {this.titleTextBoolean = ! this.titleTextBooleanthis.deleteArrList = []})Button(" + ").fontColor(Color.White).fontSize(14).onClick(() => {// 新增联系人(往数组追加对象)this.PhonePerson.push(getPhonePerson())})}.width('100%')// 主体列表List({ space: 10 }) {ForEach(this.PhonePerson, (item: Person, index: number) => {ListItem() {// 联系人项目ContactPersonComponent({// 将当前对象传递下去item: item,currentContactID: this.currentContactID,titleTextBoolean: this.titleTextBoolean,deleteArrList: this.deleteArrList})}})}.margin({ top: 10 }).layoutWeight(1)// 底部按钮if (this.titleTextBoolean) {Button(this.deleteArrList.length === 0 ? "取消" :  "删除").fontColor(Color.White).backgroundColor(this.deleteArrList.length === 0 ? Color.Gray : Color.Red).onClick(() => {if (this.deleteArrList.length === 0) {promptAction.showToast({message: "操作取消!",textColor: "#FFCCAA"})this.titleTextBoolean = false} else {for(let item = 0; item < this.PhonePerson.length; item++) {for(let i = 0; i < this.deleteArrList.length; i++) {if (this.PhonePerson[item].id === this.deleteArrList[i]) {this.PhonePerson.splice(item, 1)}}}// 复原操作this.titleTextBoolean = false// 每次删除完成后,重置数组this.deleteArrList = []promptAction.showToast({message: "删除成功!",textColor: "#8ADAB2"})}})}}.width('100%').height('100%').padding(15).backgroundColor("#ffd6d4d4")}
}@Component
struct ContactPersonComponent {@ObjectLink item: Person@State showFlag: boolean = false@Link @Watch("onClickContactChange") currentContactID: number@Prop titleTextBoolean: boolean@Link deleteArrList: number[]onClickContactChange() {// 只要id发生变化,则将id 不等于当前的联系人详细信息项关闭if(this.currentContactID != this.item.id) {this.showFlag = false}}build() {Column({ space: 15 }) {Row({ space: 10 }) {if (this.titleTextBoolean) {Toggle({ type: ToggleType.Checkbox})  // {type: 按钮类型, isOn: 按钮是否选中状态}.selectedColor("#FFB0B0") // Toggle按钮组件 选中时候的颜色.onChange((value: boolean) => {// value值为true和false,二者之间随时切换!如果用户点击就为true,在次点击就为falseif (value) {this.deleteArrList.push(this.item.id)} else {// 获取该元素在deleteArrList的位置,以便后续删除操作let index: number = this.deleteArrList.indexOf(this.item.id)this.deleteArrList.splice(index,  1)}})}Image($r("app.media.startIcon")).width(35).height(35)Text(this.item.name)Blank()Image(this.item.isStar ? $r("app.media.select_collection") : $r("app.media.collection")).width(24).onClick(() => {this.item.isStar = ! this.item.isStar// 弹框提示if (this.item.isStar) {promptAction.showToast({message: `收藏成功!`,alignment: Alignment.Bottom,offset: { dx: 0, dy: -200},textColor: "#9ADE7B"})} else {promptAction.showToast({message: `取消收藏!`,alignment: Alignment.Bottom,offset: { dx: 0, dy: -200},textColor: Color.Red})}})}.width('100%').height(60)if (this.showFlag) {Divider().strokeWidth(2).color(Color.Black)Row({ space: 20 }) {Text("手机号码:")Text(this.item.phone)}.width('100%').justifyContent(FlexAlign.Start).padding(15)}}.backgroundColor(Color.White).padding({ top: 5, bottom: 5, left: 10, right: 10 }).borderRadius(15).onClick(() => {this.showFlag = ! this.showFlagthis.currentContactID = this.item.id  // 将当前点击的联系人 id 给父组件})}
}

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

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

相关文章

CoolEdit详细使用和安装教程

Cool Edit Pro主要用于音频录制、编辑、混音和后期处理。Cool Edit Pro 的特点包括&#xff1a; 音频编辑&#xff1a;支持多轨编辑&#xff0c;可以同时处理多个音频文件&#xff0c;支持精确的音频剪切、复制、粘贴等操作。 录音功能&#xff1a;内置强大的录音功能&#xf…

如何量化管理研发团队的技术债务?

在探讨技术债的成因之前&#xff0c;我们需要澄清一些关于技术债起因和本质的普遍误解。 误解一&#xff1a;技术债务等同于劣质代码 那么&#xff0c;什么构成了所谓的「劣质代码」&#xff1f; 所谓的好代码&#xff0c;可能是指那些整洁、不会在未来限制你决策的代码&…

使用layui的table提示Could not parse as expression(踩坑记录)

踩坑记录 报错图如下 原因&#xff1a; 原来代码是下图这样 上下俩中括号都是连在一起的&#xff0c;可能导致解析问题 改成如下图这样 重新启动项目&#xff0c;运行正常&#xff01;

代理 IP 行业现状与未来趋势分析

随着互联网的飞速发展&#xff0c;代理 IP 行业在近年来逐渐兴起并成为网络技术领域中一个备受关注的细分行业。它在数据采集、网络营销、隐私保护等多个方面发挥着重要作用&#xff0c;其行业现状与未来发展趋势值得深入探讨。 目前&#xff0c;代理 IP 行业呈现出以下几个显著…

泷羽Sec学习笔记-zmap搭建炮台

zmap搭建炮台 zmap扫描环境&#xff1a;kali-linux 先更新软件库 sudo apt update 下载zmap sudo apt install zmap 开始扫描(需要root权限) sudo zmap -p 80 -o raw_ips.txt 代码解析&#xff1a; sudo&#xff1a;以超级用户&#xff08;管理员&#xff09;权限运行…

Introduction to NoSQL Systems

What is NoSQL NoSQL database are no-tabular非數據表格 database that store data differently than relational tables 其數據的存儲方式與關係型表格不同 Database that provide a mechanism機制 for data storage retrieval 檢索 that is modelled in means other than …

规则引擎(一)-技术要点

本文是规则引擎的第一篇&#xff0c;首先介绍规则引擎的技术要点&#xff0c;系列后续文章大纲 1. 事实 事实是规则的依据&#xff0c;来源于业务&#xff0c;或是业务实体&#xff0c;或是多个业务实体的汇集 2. 项目 描述规则的项目结构&#xff1b;KIE核心api&#xff1b;s…

redis集群 服务器更换ip,怎么办,怎么更换redis集群的ip

redis集群 服务器更换ip&#xff0c;怎么办&#xff0c;怎么更换redis集群的ip 1、安装redis三主三从集群2、正常状态的redis集群3、更改redis集群服务器的ip 重启服务器 集群会down4、更改redis集群服务器的ip 重启服务器 集群down的原因5、更改redis集群服务器的ip后&#xf…

详解负载均衡

什么是负载均衡&#xff1f; 想象一下&#xff0c;你有一家餐厅&#xff0c;当有很多客人同时到来时&#xff0c;如果只有一名服务员接待&#xff0c;可能会导致服务变慢。为了解决这个问题&#xff0c;你可以增加更多的服务员来分担工作&#xff0c;这样每位服务员就可以更快…

SpringCloud微服务实战系列:03spring-cloud-gateway业务网关灰度发布

目录 spring-cloud-gateway 和zuul spring webflux 和 spring mvc spring-cloud-gateway 的两种模式 spring-cloud-gateway server 模式下配置说明 grayLb://system-server 灰度发布代码实现 spring-cloud-gateway 和zuul zuul 是spring全家桶的第一代网关组件&#x…

win10配置免密ssh登录远程的ubuntu

为了在终端ssh远程和使用VScode远程我的VM上的ubuntu不需要设置密码&#xff0c;需要在win10配置免密ssh登录远程的ubuntu。 在win10打开cmd&#xff0c;执行下面的代码生成密钥对&#xff08;会提示进行设置&#xff0c;按照默认的配置就行&#xff0c;一直回车&#xff09;&…

Jupyter Notebook 适合做机器学习开发吗?

现在很多机器学习项目都是在Jupyter notebook中开发、训练、调试和演示的&#xff0c;比如openai、deepmind等&#xff0c;kaggle比赛中的原生环境就是Jupyter notebook&#xff0c;几乎任何机器学习的开发都可以在上面进行。 对于问题中的困扰&#xff0c;想要写py文件&#x…

Python(四)—— 使用库

Python 的官方文档传送门&#xff1a;https://docs.python.org/3.10/library/index.html 一&#xff0c;import import和 C/C 的 #include 一样&#xff0c;都是使用库函数的必要步骤&#xff0c;下面给出了几个示例 示例一&#xff1a;日期计算 输入任意两个日期&#xff0c…

无人机飞行服务技术详解

无人机飞行服务技术涵盖了多个方面&#xff0c;以下是对其关键技术的详细解析&#xff1a; 一、无人机类型与特点 无人机根据其设计和功能的不同&#xff0c;主要分为以下几种类型&#xff1a; 1. 多旋翼无人机&#xff1a;最常见的无人机类型&#xff0c;通过多个电机和螺旋…

【落羽的落羽 C语言篇】一些常见的字符函数、字符串函数、内存函数

文章目录 一、字符函数1. 字符分类函数2. 字符转换函数 二、字符串函数1. strlen的使用和模拟实现使用模拟实现 2. strcpy的使用和模拟实现使用模拟实现 3. strcat的使用和模拟实现使用模拟实现 4. strcmp的使用和模拟实现使用模拟实现 5. strncpy的使用6. strncat的使用7. str…

小程序-基于java+SSM+Vue的微信阅读小程序设计与实现

项目运行 1.运行环境&#xff1a;最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境&#xff1a;IDEA&#xff0c;Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境&#xff1a;Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…

Airborne使用教程

1.安装环境 前提条件&#xff1a;系统已安装Ruby 打开终端输入如下命令 gem install airborne 或者在Gemfile添加 gem airborne 然后运行bundle install 2.编写脚本 在项目中新建api_tests_spec.rb文件 以GET接口"https://www.thunderclient.com/welcome"为…

社区生活超市系统|Java|SSM|JSP|

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…

零基础开始学习鸿蒙开发-基础页面的设计

目录 1.样例图 2.逐项分析 2.1 头顶布局分析&#xff1a;首先我们要把第一行的图标绘制出来&#xff0c;一个左一个右&#xff0c;很明显&#xff0c;需要放在一个Row容器中&#xff0c;具体代码如下&#xff1a; 2.2 和头像同一行的布局&#xff0c;需要注意的是&#xff0c…

211-基于FMC的1路1.5G ADC 1路 2.5G DAC子卡

一、板卡概述 FMC-1AD-1DA-1SYNC是我司自主研发的一款1路1G AD采集、1路2.5G DA回放的FMC、1路AD同步信号子卡。板卡采用标准FMC子卡架构&#xff0c;可方便地与其他FMC板卡实现高速互联&#xff0c;可广泛用于高频模拟信号采集等领域。 二、功能介绍 2.1 原理框图 2.2 硬件…