当前位置: 首页 > news >正文

鸿蒙(HarmonyOS)应用开发——管理组件状态

状态管理

在应用中,界面通常都是动态的。

改变
更新
用户点击目标项
展开/收起状态
目标项更新

ArkUI作为声明式UI,是具有状态UI更新的特点。当用户进行界面交互或有外部时间引起状态改变时,状态的变化会触发组件自动更新。

改变
驱动更新
用户交互或外部事件
状态
UI

ArkUI框架提供了多种管理状态的装饰器来修饰变量。

状态属性值

装饰器说明
@State组件内的状态管理
@Prop从父组件单项同步状态
@Link与父组件双向同步状态
@Provide 和 @Comsume跨组件层级双向同步状态

组件内的状态管理 @State

当需要在组件内使用状态来控制UI的不同呈现方式时,可以使用@State装饰器。

@Component
export default struct TargetListItem {@State isExpanded: boolean = false;...build() {...Column() {...if (this.isExpanded) {Blank()ProgressEditPanel(...)}}.height(this.isExpanded ? $r('app.float.expanded_item_height')                  : $r('app.float.list_item_height')).onClick(() => {...this.isExpanded = !this.isExpanded;...})...}
}

从父组件单向同步状态@Prop

当子组件的状态依赖从父组件传递而来时,可以用@Prop装饰。当父组件中状态变化时,该状态也会更新至@Prop修饰的变量;对@Prop修饰的变量的修改不会影响其父组件中的状态

与父组件双向同步状态 @Link、@Watch

子组件列表
目标一
目标二

在开发过程中,尤其是列表中,点击了目标一,让目标一有了选中的样式,又重新点击了目标二,那么目标一就需要恢复原样。那么如何用代码实现?

以列表为例子;每一个列表项都有索引值index,我们用clickIndex:记录被点击的目标索引;通过@Link会通知子组件点击了哪一个。然后再通过@Watch来监听是否点击了另一个。

 @Link @Watch('onClickIndexChanged') clickIndex: number;@State isExpanded: boolean = false...onClickIndexChanged() {if (this.clickIndex != this.index) {this.isExpanded = false;}}

跨组件层级双向同步状态:@Provide和@Consume

跨组件层级双向同步状态是指@Provide修饰的状态变量自动对提供者组件的所有后代组件可用,后代组件通过使用@Consume装饰的变量来获得对提供的状态变量的访问。
@Provide作为数据的提供方,可以更新其子孙节点的数据,并触发页面渲染。
@Consume在感知到@Provide数据的更新后,会触发当前自定义组件的重新渲染。

使用@Provide的好处是开发者不需要多次将变量在组件间传递

@Provide/@Consume装饰的状态变量有以下特性:

  • @Provide装饰的状态变量自动对其所有后代组件可用,即该变量被“provide”给他的后代组件。由此可见,@Provide的方便之处在于,开发者不需要多次在组件之间传递变量。
  • 后代通过使用@Consume去获取@Provide提供的变量,建立在@Provide和@Consume之间的双向数据同步,与@State/@Link不同的是,前者可以在多层级的父子组件之间传递。
  • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定,变量类型必须相同。
// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

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

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步:

  • 被@Observed装饰的类,可以被观察到属性的变化;
  • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中的属性,这个属性同样也需要被@Observed装饰。
  • 单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。

限制条件

  • 使用@Observed装饰class会改变class原始的原型链,@Observed和其他类装饰器装饰同一个class可能会带来问题。
  • @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。

相关文章:

鸿蒙(HarmonyOS)应用开发——管理组件状态

状态管理 在应用中,界面通常都是动态的。 #mermaid-svg-DrPNsglFkyLqn7Lw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DrPNsglFkyLqn7Lw .error-icon{fill:#552222;}#mermaid-svg-DrPNsglFkyLqn7Lw …...

倚天屠龙:Github Copilot vs Cursor

武林至尊,宝刀屠龙。号令天下,莫敢不从。倚天不出,谁与争锋! 作为开发人员吃饭的家伙,一款好的开发工具对开发人员的帮助是无法估量的。还记得在学校读书的时候,当时流行CS架构的RAD,Delphi和V…...

【web安全】RCE漏洞原理

前言 菜某的笔记总结,如有错误请指正。 RCE漏洞介绍 简而言之,就是代码中使用了可以把字符串当做代码执行的函数,但是又没有对用户的输入内容做到充分的过滤,导致可以被远程执行一些命令。 RCE漏洞的分类 RCE漏洞分为代码执行…...

EI论文复现:基于组合双向拍卖的共享储能机制研究程序代码!

本程序参考EI期刊论文《基于组合双向拍卖的共享储能机制研究》,文中的组合双向拍卖交易机制较为新颖,本质上属于博弈范畴,共享储能是目前的研究热点,牵涉到共享储能参与者的投标策略和收益函数,文中所提模型可为电力市…...

ThinkPHP 5 中,你可以使用定时任务调度器(TaskScheduler)来执行其他定时任务

在 ThinkPHP 5 中,你可以使用定时任务调度器(TaskScheduler)来执行其他定时任务。以下是一个示例代码,演示如何在一个定时任务中执行另一个定时任务: 首先,你需要创建一个继承自 think\console\Command 的…...

mysql:免费的GUI客户端工具推荐并介绍常用的操作

给大家推荐几个常用的 mysql 数据库客户端 sequel-pro sequel-ace 官网下载地址 免费 sequel-ace 可以理解为 Sequel Pro 的升级版,由于Sequel Pro官方不维护了,特别是对 MySQL 8.0 支持不好,所以现在由社区维护了新分支 sequel-ace&#x…...

[Unity数据管理]自定义菜单创建Unity内部数据表(ScriptableObject)

Unity 在开发的时候如果数据量比较大&#xff0c;或者一部分数据需要存在云端&#xff0c;那么就需要一些数据库 轻量型到大型的包括&#xff1a; 数组-内存存储读取 列表-内存存储读取 List<T> tList new List<T>(); XML-硬盘存储读取 JSON-硬盘存储读取 …...

使用JAVA语言写一个排队叫号的小程序

以下是一个简单的排队叫号的小程序&#xff0c;使用JAVA语言实现。 import java.util.LinkedList; import java.util.Queue; import java.util.Scanner;public class NumberingSystem {public static void main(String[] args) {Queue<String> queue new LinkedList<…...

openGauss学习笔记-140 openGauss 数据库运维-例行维护-例行维护表

文章目录 openGauss学习笔记-140 openGauss 数据库运维-例行维护-例行维护表140.1 相关概念140.2 操作步骤140.3 维护建议 openGauss学习笔记-140 openGauss 数据库运维-例行维护-例行维护表 为了保证数据库的有效运行&#xff0c;数据库必须在插入/删除操作后&#xff0c;基于…...

ubuntu20.04使用LIO-SAM对热室空间进行重建

一、安装LIO-SAM 1.环境配置 默认已经安装过ros sudo apt-get install -y ros-Noetic-navigation sudo apt-get install -y ros-Noetic-robot-localization sudo apt-get install -y ros-Noetic-robot-state-publisher 安装 gtsam(如果是18.04的ubuntu直接按照官网配置&…...

如何选学生用的台灯?眼科专家都说好的学生台灯分享!

根据中国眼健康白皮书显示&#xff0c;我国儿童青少年近视总体发生率为53.6%&#xff0c;由此可见如今青少年学生近视的发病率非常高的&#xff0c;且越来越向低龄化发展&#xff0c;不少还在小学阶段的孩子也存在近视的现象。 而造成这个现象的主要原因就是长时间的用眼导致的…...

Linux4.8、环境变量续

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 前言 如果对环境变量没有基本的理解&#xff0c;那么建议先看完这篇文章&#xff1a;环境变量https://blog.csdn.net/m0_74824254/article/details/134661113?spm1001.2014.3001.5501 环境变量与本地变量区别 使用export设…...

PTA 7-231 买文具

某小学要购置文具。批发市场中 A 牌的铅笔卖 5 元一支&#xff0c;C 牌的铅笔卖 2 元一支&#xff0c;D 牌的简易铅笔卖1元2只&#xff08;捆绑销售&#xff0c;只能买偶数只&#xff09;。 如果想用n元买n支笔&#xff0c;问有多少种买法&#xff1f;&#xff08;题目保证 n …...

GPTs每日推荐--生化危机【典藏版】

今天给大家推荐一个游戏性质的GPTs&#xff0c;叫做生化危机典藏版&#xff0c;国内点击可玩。 开篇&#xff1a;玩家从末日中醒来。 选择&#xff1a;玩家会遇到各种资源、任务、剧情&#xff0c;需要自行选择相关的分支剧情&#xff0c;一旦选错&#xff0c;无法重选。 结局…...

jenkins-cicd基础操作

1.先决条件 1.首先我个人势在k8s集群中创建的jenkins,部署方法搭建 k8s部署jenkins-CSDN博客 2.安装指定插件. 1.Gitlab plugin 用于调用gitlab-api的插件 2.Kubernetes plugin jenkins与k8s进行交互的插件,可以用来自动化的构建和部署 3.Build Authorizatio…...

ctfhub技能树_web_信息泄露

目录 二、信息泄露 2.1、目录遍历 2.2、Phpinfo 2.3、备份文件下载 2.3.1、网站源码 2.3.2、bak文件 2.3.3、vim缓存 2.3.4、.DS_Store 2.4、Git泄露 2.4.1、log 2.4.2、stash 2.4.3、index 2.5、SVN泄露 2.6、HG泄露 二、信息泄露 2.1、目录遍历 注&#xff1…...

使用Docker本地部署chatgpt

GitHub上有一个开源的工程ChatGPT-Next-Web&#xff0c;这个工程已经封装好了UI以及和OpenAI的API之间的交互&#xff0c;你要做的事情就是把他部署到本地&#xff0c;并配置好你的OpenAI的sk&#xff0c;然后就可以使用了。那么接下来的文章里&#xff0c;我会手把手教你如何C…...

SpringBoot 集成Netty、WebSocket,5分钟搭建聊天通信系统

文章目录 前言Netty简介使用Netty开发WebSocket应用程序开始项目一、添加依赖二、自定义处理器三、初始化通道加载器四、配置启动器五、添加启动监听器六、启动项目七、演示效果1. 客户端1看到其他客户端上线2. 客户端3收到客户端1发送的消息3. 客户端1收到客户端2下线前言 在…...

LeedCode刷题---双指针问题

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 双指针简介 常见的双指针有两种形式&#xff0c;一种是对撞指针&#xff0c;一种是左右指针。 对撞指针:一般用于顺序结构中&…...

使用Notepad++编辑器,安装AnalysePlugin搜索插件

概述 是一款非常有特色的编辑器&#xff0c;Notepad是开源软件&#xff0c;Notepad中文版可以免费使用。 操作步骤&#xff1a; 1、在工具栏 ->“插件”选项。 2、勾选AnalysePlugin选项&#xff0c;点击右上角“安装”即可。 3、 确认安装插件 4、下载插件 5、插件已安装…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...