鸿蒙开发相关知识（二）【状态管理：@State、@Prop、@Link、@Provide、@Consume、@Observed、@ObjectLink】

2024-02-26 18:44
文章标签 开发 管理 知识 相关 link 状态 state prop 鸿蒙 provide consume observed objectlink

本文主要是介绍鸿蒙开发相关知识（二）【状态管理：@State、@Prop、@Link、@Provide、@Consume、@Observed、@ObjectLink】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 一、@State装饰器：组件内状态
  • 二、@Prop装饰器：父子单向同步
  • 三、@Link装饰器：父子双向同步
  • 四、@Provide和@Consume：与后代组件双向同步
  • 五、@Observed和@ObjectLink：嵌套类对象属性变化

一、@State装饰器：组件内状态

  • @State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。
  • 当状态改变时，UI会发生对应的渲染改变。
  • 嵌套类型以及数组中的对象属性无法触发视图更新。
  • 允许装饰的变量类型：Object、class、string、number、boolean、enum类型，以及这些类型的数组。
  • 必须本地初始化，不能为空值。
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.message = 'hello ArkTs!'})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

二、@Prop装饰器：父子单向同步

  • @Prop装饰的变量可以和父组件建立单向的同步关系。

  • 单向同步：对父组件状态变量值的修改，将同步给子组件@Prop装饰的变量，子组件@Prop变量的修改不会同步到父组件的状态变量上。

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

  • 允许装饰的变量类型：string、number、boolean、enum类型。

  • 不可以是数组、any

  • 父组件是对象类型时，子组件是对象属性，如下代码所示：

// 任务统计信息
class StatInfo {totalTask: number = 0finishTask: number = 0
}// 统一的卡片样式
@Styles function card() {.width('95%').padding(20).backgroundColor(Color.White).borderRadius(15).shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
}
@Entry
@Component
struct PropPage {// 统计信息@State stat: StatInfo = new StatInfo()// 父组件数剧是简单类型时// @State totalTask: number = 0// @State finishTask: number = 0build() {Column({ space: 10 }) {// 调用子组件并传参TaskStatistics({ totalTask: this.stat.totalTask, finishTask: this.stat.finishTask })// 父组件数剧是简单类型时// TaskStatistics({ totalTask: this.totalTask, finishTask: this.finishTask })}.width('100%').height('100%').backgroundColor('#F1F2F3')}
}

// 子组件
@Component
struct TaskStatistics {@Prop totalTask: number@Prop finishTask: numberbuild() {Stack() {Progress({value: this.finishTask,total: this.totalTask,type: ProgressType.Ring}).width(100)Row() {Text(this.finishTask.toString()).fontSize(24).fontColor('#36D')Text(' / ' + this.totalTask.toString()).fontSize(24)}}.card().margin({ top: 5, bottom: 10 })}
}

三、@Link装饰器：父子双向同步

  • 子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
  • 双向同步：对父组件状态变量值的修改，将同步给子组件@Prop装饰的变量，反之亦然。
  • @Link装饰器不能在@Entry装饰的自定义组件中使用。
  • 嵌套类型以及数组中的对象属性无法触发视图更新。
  • 子组件从父组件初始化@State的语法为子组件名({ aLink: $aState })
  • 允许装饰的变量类型：Object、class、string、number、boolean、enum类型，以及这些类型的数组。如下代码所示：
// 任务统计信息
class StatInfo {totalTask: number = 0finishTask: number = 0
}
// 任务类
class Task {static id: number = 1// 任务名称name: string = `任务${Task.id++}`// 任务状态：是否完成finished: boolean = false
}

@Entry
@Component
struct PropPage {// 统计信息@State stat: StatInfo = new StatInfo()// 父组件数剧是简单类型时// @State totalTask: number = 0// @State finishTask: number = 0build() {Column({ space: 10 }) {// 调用子组件并传参TaskList({ stat: $stat })// 父组件数剧是简单类型时// TaskList({totalTask: $totalTask, finishTask: $finishTask })}.width('100%').height('100%').backgroundColor('#F1F2F3')}
}

@Component
struct TaskList {// 总任务数量@Link stat: StatInfo// 任务数组@State tasks: Task[] = []handleTaskChange() {// 1.更新任务总数量this.stat.totalTask = this.tasks.length// 2.更新已完成任务数量this.stat.finishTask = this.tasks.filter(item => item.finished).length}// 父组件数剧是简单类型时// @Link totalTask: number// @Link finishTask: number// handleTaskChange() {//   // 1.更新任务总数量//   this.totalTask = this.tasks.length//   // 2.更新已完成任务数量//   this.finishTask = this.tasks.filter(item => item.finished).length// }build() {Column() {Button('新增任务').width(200).margin({ bottom: 10 }).onClick(() => {// 1.新增任务数据this.tasks.push(new Task())// 2.更新任务总数量this.handleTaskChange()})}}
}

四、@Provide和@Consume：与后代组件双向同步

  • @Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。
  • 不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。格式为子组件名()
  • @Provide装饰的变量是在祖先节点中，可以理解为被“提供”给后代的状态变量。
  • @Consume装饰的变量是在后代组件中，去“消费（绑定）”祖先节点提供的变量。
  • 示例代码如下：
// 任务统计信息
class StatInfo {totalTask: number = 0finishTask: number = 0
}

@Entry
@Component
struct PropPage {// 统计信息@Provide stat: StatInfo = new StatInfo()build() {Column({ space: 10 }) {// 调用子组件TaskStatistics()}.width('100%').height('100%').backgroundColor('#F1F2F3')}
}
@Component
struct TaskStatistics {@Consume stat: StatInfobuild() {Stack() {Progress({value: this.stat.finishTask,total: this.stat.totalTask,type: ProgressType.Ring}).width(100)Row() {Text(this.stat.finishTask.toString()).fontSize(24).fontColor('#36D')Text(' / ' + this.stat.totalTask.toString()).fontSize(24)}}.card().margin({ top: 5, bottom: 10 })}
}

五、@Observed和@ObjectLink：嵌套类对象属性变化

  • @ObjectLink 和 @Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步
  • 被@Observed装饰的类，可以被观察到属性的变化
  • 单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。
  • @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。
// 任务类
@Observed
class Task {static id: number = 1// 任务名称name: string = `任务${Task.id++}`// 任务状态：是否完成finished: boolean = false
}// 任务完成样式
@Extend(Text) function finishedTask() {.decoration({ type: TextDecorationType.LineThrough }).fontColor('#B1B2B1')
}
@Component
struct TaskList {// 总任务数量@Consume stat: StatInfo// 任务数组@State tasks: Task[] = []handleTaskChange() {// 1.更新任务总数量this.stat.totalTask = this.tasks.length// 2.更新已完成任务数量this.stat.finishTask = this.tasks.filter(item => item.finished).length}build() {Column() {// 新增任务按钮Button('新增任务').width(200).margin({ bottom: 10 }).onClick(() => {// 1.新增任务数据this.tasks.push(new Task())// 2.更新任务总数量this.handleTaskChange()})// 任务列表List({ space: 10 }) {ForEach(this.tasks,(item: Task, index) => {ListItem() {TaskItem({ item: item, onTaskChange: this.handleTaskChange.bind(this) })}.swipeAction({ end: this.DeleteButton(index) })})}.width('100%').layoutWeight(1).alignListItem(ListItemAlign.Center)}}@Builder DeleteButton(index: number) {Button() {Image($r('app.media.img_user_avatar')).fillColor(Color.White).width(20)}.width(40).height(40).type(ButtonType.Circle).backgroundColor(Color.Red).margin(5).onClick(() => {this.tasks.splice(index, 1)this.handleTaskChange()})}
}
@Component
struct TaskItem {@ObjectLink item: TaskonTaskChange: () => voidbuild() {Row() {if (this.item.finished) {Text(this.item.name).finishedTask()} else {Text(this.item.name)}Checkbox().select(this.item.finished).onChange(val => {// 1.更新当前任务状态this.item.finished = val// 2.更新已完成任务数量this.onTaskChange()})}.card().justifyContent(FlexAlign.SpaceBetween)}
}

这篇关于鸿蒙开发相关知识（二）【状态管理：@State、@Prop、@Link、@Provide、@Consume、@Observed、@ObjectLink】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/749798。

相关文章

Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
hdu1565（状态压缩）

hdu1565（状态压缩）

本人第一道ac的状态压缩dp，这题的数据非常水，很容易过 题意：在n*n的矩阵中选数字使得不存在任意两个数字相邻，求最大值 解题思路： 一、因为在1<<20中有很多状态是无效的，所以第一步是选择有效状态，存到cnt[]数组中 二、dp[i][j]表示到第i行的状态cnt[j]所能得到的最大值，状态转移方程dp[i][j] = max(dp[i][j],dp[i-1][k]) ,其中k满足c
阅读更多...
综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动，这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升：减少抖动，提高图像的清晰度和细节表现力，使得监控画面更加真实可信。 - 细节增强：在低光条件下，抖
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
sqlite3 相关知识

sqlite3 相关知识

WAL 模式 VS 回滚模式 特性WAL 模式回滚模式（Rollback Journal）定义使用写前日志来记录变更。使用回滚日志来记录事务的所有修改。特点更高的并发性和性能；支持多读者和单写者。支持安全的事务回滚，但并发性较低。性能写入性能更好，尤其是读多写少的场景。写操作会造成较大的性能开销，尤其是在事务开始时。写入流程数据首先写入 WAL 文件，然后才从 WAL 刷新到主数据库。数据在开始
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2