【HarmonyOS应用开发】ArkUI 开发框架-进阶篇-管理组件状态（九）

news2024/10/7 12:26:08

管理组件状态

在这里插入图片描述

一、概述

在应用中，界面通常都是动态的。下图所示，在子目标列表中，当用户点击目标一，目标一会呈现展开状态，再次点击目标一，目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。

请添加图片描述
ArkUI作为一种声明式UI，具有状态驱动UI更新的特点。当用户进行界面交互或有外部事件引起状态改变时，状态的变化会触发组件自动更新。所以在ArkUI中，我们只需要通过一个变量来记录状态。当改变状态的时候，ArkUI就会自动更新界面中受影响的部分。

在这里插入图片描述
ArkUI框架提供了多种管理状态的装饰器来修饰变量，使用这些装饰器修饰的变量即称为状态变量。

在组件范围传递的状态管理常见的场景如下：

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

在组件内使用@State装饰器来修饰变量，可以使组件根据不同的状态来呈现不同的效果。若当前组件的状态需要通过其父组件传递而来，此时需要使用@Prop装饰器；若是父子组件状态需要相互绑定进行双向同步，则需要使用@Link装饰器。使用@Provide和@Consume装饰器可以实现跨组件层级双向同步状态。

在实际应用开发中，应用会根据需要封装数据模型。如果需要观察嵌套类对象属性变化，需要使用@Observed和@ObjectLink装饰器，因为上述表格中的装饰器只能观察到对象的第一层属性变化。@Observed和@ObjectLink装饰器的具体使用方法可参考@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化。

另外，当状态改变，需要对状态变化进行监听做一些相应的操作时，可以使用@Watch装饰器来修饰状态。

二、组件内的状态管理：@State

实际开发中由于交互，组件的内容呈现可能产生变化。当需要在组件内使用状态来控制UI的不同呈现方式时，可以使用@State装饰器。以任务管理应用为例，当点击子目标列表的其中一项，列表项会展开。当再次点击同一项，列表项会收起。所以，对于某一个列表项来说，它的呈现方式会受列表项是否展开这个状态影响。

展开/收起目标项
请添加图片描述
将是否展开这个状态定义为isExpanded变量，当其值为false表示目标项收起，值为true时表示目标项展开。

此时，需要使用@State装饰器修饰isExpanded，使其成为目标项内部的状态变量。通过@State装饰后，框架内部会建立数据与视图间的绑定，当isExpanded状态变化时，目标项会随之展开或收起。

在这里插入图片描述
其具体实现只要用@State修饰isExpanded变量，定义是否展开状态。然后通过条件渲染，实现是否显示进度调整面板和列表项的高度变化。最后，监听列表项的点击事件，在onClick回调中改变isExpanded状态。

这样就实现了对相同列表项点击时，列表项的展开和收起功能。当用户反复点击同一个列表项时，组件内的isExpanded状态变化，列表项会自动更新。

@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修饰的变量；对@Prop修饰的变量的修改不会影响其父组件中的状态。
请添加图片描述
在目标管理应用中，当用户点击子目标列表的“编辑”文本，列表进入编辑模式，点击取消，列表退出编辑模式。

整个列表是自定义组件TargetList，顶部是文本显示区域，主要是Text组件，底部是一个Button组件。

中间区域则是用来显示每个目标项，目标项是自定义组件TargetListItem。

从图中可以看出，TargetListItem是TargetList的子组件。TargetList是TargetListItem父组件。

在这里插入图片描述
对于父组件TargetList，其顶部显示的文本和底部按钮会随编辑模式的变化而变化，因此父组件拥有编辑模式状态。

对于子组件TargetListItem，其最右侧是否预留位置和显示勾选框也会随编辑模式变化，因此子组件也拥有编辑模式状态。

但是是否进入编辑模式，其触发点是在用户点击列表的“编辑”或取消按钮，状态变化的源头仅在于父组件TargetList。当父组件TargetList中的编辑模式变化时，子组件TargetListItem的编辑模式状态需要随之变化。

在这里插入图片描述
在父组件TargetList中可以定义一个是否进入编辑模式的状态，即用@State修饰isEditMode。@State修饰的变量不仅是组件内部的状态，也可以作为子组件单向或双向同步的数据源。ArkUI提供了@Prop装饰器，@Prop修饰的变量可以和其父组件中的状态建立单向同步关系，所以用@Prop修饰子组件TargetListItem中的isEditMode变量。

在父组件TargetList中，用@State修饰isEditMode，定义编辑模式状态。然后利用条件渲染实现根据是否进入编辑模式，显示不同的文本和按钮。同时，在父组件中需要在用户点击时改变状态，触发界面更新。

当点击“编辑”事件发生时，进入编辑模式，显示取消、全选文本和勾选框，同时显示删除按钮；当点击“取消”事件发生时，退出编辑模式，显示“编辑”文本和“添加子目标”按钮。

@Component
export default struct TargetList {
	@State isEditMode: boolean = false;
	...
	build() {
		Column() {
			Row() {
				...
					if (this.isEditMode) {
						Text($r('app.string.cancel_button'))
							.onClick(() => {
								this.isEditMode = false;
								...
							})
							...
						Text($r('app.string.select_all_button'))...
						Checkbox()...
					} else {
						Text($r('app.string.edit_button'))
							.onClick(() => {
								this.isEditMode = true;
							})
							...
						}
					...
				}
				...
				List({ space: CommonConstants.LIST_SPACE }) {
					ForEach(this.targetData, (item: TaskItemBean, index: number) => {
						ListItem() {
							TargetListItem({
								isEditMode: this.isEditMode,
								...
							})
						}
					}, (item, index) => JSON.stringify(item) + index)
				}
				...
				if (this.isEditMode) {
					Button($r('app.string.delete_button'))
				} else {
					Button($r('app.string.add_task'))
				}
			}
			...
		}
}

在子组件TargetListItem中，使用@Prop修饰子组件的isEditMode变量，定义子组件的编辑模式状态。然后同样根据是否进入编辑模式，控制目标项最右侧是否预留位置和显示勾选框。

@Component
export default struct TargetListItem {
	@Prop isEditMode: boolean;
	...
		Column() {
			...
		}
		.padding({
		...
		right: this.isEditMode ? $r('app.float.list_edit_padding') 
: $r('app.float.list_padding')
		})
		...

		if (this.isEditMode) {
			Row() {
				Checkbox()...
			}
		}
	...
}

最后，最关键的一步就是要在父组件中使用子组件时，将父组件的编辑模式状态this.isEditMode传递给子组件的编辑模式状态isEditMode。

@Component
export default struct TargetList {
	@State isEditMode: boolean = false;
	...
	build() {
		Column() {
			...
			List({ space: CommonConstants.LIST_SPACE }) {
				ForEach(this.targetData, (item: TaskItemBean, index: number) => {
					ListItem() {
						TargetListItem({
							isEditMode: this.isEditMode,
							...
						})
					}
				}, (item, index) => JSON.stringify(item) + index)
			}
			...
		}
		...
	}
}

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

若是父子组件状态需要相互绑定进行双向同步时，可以使用@Link装饰器。父组件中用于初始化子组件@Link变量的必须是在父组件中定义的状态变量。

请添加图片描述
在目标管理应用中，当用户点击同一个目标，目标项会展开或者收起。当用户点击不同的目标项时，除了被点击的目标项展开，同时前一次被点击的目标项会收起。

如上图所示，当目标一展开时，点击目标三，目标三会展开，同时目标一会收起。再点击目标一时，目标一展开，同时目标三会收起。

从目标一切换到目标三的流程中，关键在于最后目标一的收起，当点击目标三时，目标一需要知道点击了目标三，目标一才会收起。

在这里插入图片描述
在子目标列表中，每个列表项都有其位置索引值index属性，表示目标项在列表中的位置。index从0开始，即第一个目标项的索引值为0，第二个目标项的索引值为1，以此类推。此外，clickIndex用来记录被点击的目标项索引。当点击目标一时，clickIndex为0，点击目标三时，clickIndex为2。

在父组件子目标列表和每个子组件目标项中都拥有clickIndex状态。当目标一展开时，clickIndex为0。此时点击目标三，目标三的clickIndex变为2，只要其父组件子目标列表感知到clickIndex状态变化，同时将此变化传递给目标一。目标一的clickIndex即可同步改变为2，即目标一感知到此时点击了目标三。

在这里插入图片描述
将列表和目标项对应到列表组件TargetList和列表项TargetListItem。首先，需要在父组件TargetList中定义clickIndex状态。
若此时子组件中的clickIndex用@Prop装饰器修饰，当子组件中clickIndex变化时，父组件无法感知，因为@Prop装饰器建立的是从父组件到子组件的单向同步关系。
ArkUI提供了@Link装饰器，用于与父组件双向同步状态。当子组件TargetListItem中的clickIndex用@Link修饰，可与父组件TargetList中的clickIndex建立双向同步关系。

@Component
export default struct TargetList {
	@State clickIndex: number = CommonConstants.DEFAULT_CLICK_INDEX;
	...
			TargetListItem({
				clickIndex: $clickIndex,
				...
			})
	...
}

首先，在父组件TargetList中用@State装饰器定义点击的目标项索引状态。然后，在子组件TargetListItem中用@Link装饰器定义clickIndex，当点击目标项时，clickIndex更新为当前目标索引值。

完成在父子组件中定义状态后，最关键的就是要建立父子组件的双向关联关系。在父组件中使用子组件时，将父组件的clickIndex传递给子组件的clickIndex。其中父组件的clickIndex加上$表示传递的是引用。

@Component
export default struct TargetListItem {
	@Link @Watch('onClickIndexChanged') clickIndex: number;
	@State isExpanded: boolean = false
	...

	onClickIndexChanged() {
		if (this.clickIndex != this.index) {
			this.isExpanded = false;
		}
	}

build() {
	...
		Column() {
			...
		}
		.onClick(() => {
			...
				this.clickIndex = this.index;
			...
			})
		...
	}
}

当目标一感知到点击了目标三时，还需要将目标一收起，切换列表项的功能才是完整的。此时，目标一感知到clickIndex变为2，需要判断与目标一本身的位置索引值0不相等，从而将目标一收起。此时，就需要用到ArkUI中监听状态变化@Watch的能力。用@Watch修饰的状态，当状态发生变化时，会触发声明时定义的回调。

我们给TargetListItem的中的clickIndex状态加上@Watch("onClickIndexChanged")。这表示需要监听clickIndex状态的变化。当clickIndex状态变化时，将触发onClickIndexChanged回调：如果点击的列表项索引不等于当前列表项索引，则将isExpanded状态置为false，从而收起该目标项。

五、跨组件层级双向同步状态：@Provide和@Consume

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

示例源码下载
https://download.csdn.net/download/Mr_Roki/88797964

由于内容过长，在同一篇博文中，会显得难于阅读。

  • 第一大点（ Video组件的使用）

  • 第二大点（给您的应用添加弹窗）

在下一篇系列里继续接上，请有兴趣的童鞋持续关注更新。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

XUbuntu22.04之如何创建、切换多个工作区(二百零九)

XUbuntu22.04之如何创建、切换多个工作区(二百零九)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒…
阅读更多...
1.31总结

1.31总结

为什么和以前标题不一样了呢，是因为今天我感觉学到的东西太少了，很难按专题发，索性就直接写个总结水一篇好了 第一题：遍历问题 题解：真的纯思维题目，真的没啥，可说的，中序遍历取决于…
阅读更多...
双目模组 - IMSEE SDK的配置实践：含Opencv的详细编译配置

双目模组 - IMSEE SDK的配置实践：含Opencv的详细编译配置

IMSEE 的环境要求： CMake(3.0以上)(需要支持vs2019) Visual Studio 2019 opencv3.3.1 IMSEE-SDK 官网参考： Windows 源码安装 — IMSEE SDK 1.4.2 文档 (imsee-sdk-docs.readthedocs.io) 【案】按照IMSEE的建议进行安装： 1 Windows 安装： 1.1 环境准备： 1.1.1 CMake：in…
阅读更多...
时序数据库 Tdengine 执行命令能够查看执行的sql语句

时序数据库 Tdengine 执行命令能够查看执行的sql语句

curl是 访问6041端口，在windows系统里没有linux里的curl命令，需要用别的工具实现。我在cmd里是访问6030端口 第一步 在安装是时序数据库的服务器上也就是数据库服务端 进入命令窗口 执行 taos 第二步 执行 show queries\G;
阅读更多...
nop-entropy可逆计算入门（1）

nop-entropy可逆计算入门（1）

第1步：从大佬的gitee：https://gitee.com/canonical-entropy/nop-entropy下载源码，进行本地编译，具体编译看项目下的readme,想偷懒的可以下载我编译后的jar，放到自己的maven仓库 https://pan.baidu.com/s/15qANnrCh5RV…
阅读更多...
这都2024年了 你还要多久才能领悟 ArrayBlockingQueue 源码

这都2024年了 你还要多久才能领悟 ArrayBlockingQueue 源码

这都2024年了 你还要多久才能领悟 ArrayBlockingQueue 源码 文章目录 这都2024年了 你还要多久才能领悟 ArrayBlockingQueue 源码阻塞队列简介阻塞队列的历史阻塞队列的思想 ArrayBlockingQueue 常见方法及测试ArrayBlockingQueue 源码分析整体设计初始化阻塞式获取和新增元素非…
阅读更多...
python数据类型-列表

python数据类型-列表

1 python中列表的定义 python中列表是一种有序和可更改的集合，允许重复的成员，列表中的元素之间数据类型可以不同（元素之间数据类型可以不相同，这一点和其它的面向对象的开发语言有很大的不同，如C#、Java）…
阅读更多...
大创项目推荐 题目：基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉

大创项目推荐 题目：基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 基…
阅读更多...
Unity_Visual Effect Graph

Unity_Visual Effect Graph

Unity_Visual Effect Graph Unity可视化特效渲染虽不及Unreal Engine，然也还是吊打一众其他引擎的，粗浅整理一波吧，需要深入研究的点实在是太多了。 按照常规包管理方式安装Visual Effect Graph插件： 安装之后，示例文件夹中自带资源，拖入场景即可： 场景只是资源的显…
阅读更多...
如何搭建一个成功的家装预约咨询小程序

如何搭建一个成功的家装预约咨询小程序

微信小程序是一种在微信平台上运行的应用程序，为企业提供了一个快速、便捷的方式与用户进行交互和服务。开通微信家装预约咨询小程序店铺，可以帮助家装企业更好地与用户进行沟通和服务，提升用户体验和便捷度。下面我们就来详细介绍一下开通微…
阅读更多...
（自用）learnOpenGL学习总结-高级OpenGL-几何着色器

（自用）learnOpenGL学习总结-高级OpenGL-几何着色器

在顶点着色器和片段着色器中间还有一个几何着色器。 几何着色器的输入是一个图元的一组顶点，在几何着色器中进行任意变换之后再给片段着色器，可以变成完全不一样的图元、可以生成更多的顶点。 #version 330 core layout (points) in; layout (line_str…
阅读更多...
R高级绘图 | P1 | 带边缘分布散点图 | 代码注释 + 结果解读

R高级绘图 | P1 | 带边缘分布散点图 | 代码注释 + 结果解读

新系列 —— R高级绘图，准备整理所有曾经绘制过的图图和未来需要的图图们的代码！预计这个系列会囊括所有常见图形，只提供高级绘图代码，基础绘图主要在 R语言绘图 系列中进行介绍，这个系列咱们主打：需要XX图…
阅读更多...
[Java 并发基础]多线程编程

[Java 并发基础]多线程编程

文章参考： https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/Future.html https://juejin.cn/post/6970558076642394142 文章目录 线程的创建方式继承 Thread实现 Runnable 接口实现 Callable 接口使用 Lambda使用线程池 线程创建相关的 jdk源码Thr…
阅读更多...
阿赵UE学习笔记——13、贴花

阿赵UE学习笔记——13、贴花

阿赵UE学习笔记目录 大家好，我是阿赵。   继续学习虚幻引擎的使用。这次介绍一种特殊的材质类型，贴花。 一、获取贴花资源 在没有分析贴花的原理之前，可以先去获得一些免费的贴花资源来使用，比如在Quixel上面就有专门的一个资源…
阅读更多...
Git - 在公司中，使用 git 的流程是什么？遇到冲突怎么办？

Git - 在公司中，使用 git 的流程是什么？遇到冲突怎么办？

目录 一、公司中 git 的使用流程 1.1、设置用户签名 1.2、创建分支，提交代码到远程仓库 1.3、创建 pr，code review 1.4、意外情况：分支冲突 一、公司中 git 的使用流程 1.1、设置用户签名 刚进公司，肯定是先初始化个人的用户…
阅读更多...
教师社会地位最直观的表现是什么

教师社会地位最直观的表现是什么

教师社会地位最直观的表现是什么？当我们谈及教师社会地位时，不能仅仅从薪资、荣誉等角度去理解，而应从教师的工作环境、待遇、以及社会对教师的认知和尊重程度等方面进行全面考察。 教师的工作环境是他们社会地位的直观体现之一。一个良好的…
阅读更多...
备战蓝桥杯---数据结构与STL应用（优先队列的小细节）

备战蓝桥杯---数据结构与STL应用（优先队列的小细节）

很显然，我们先二分求X,对于验证，一开始我先想的是直接求每个的不足电量再除充电量后向上取整，然后判断与k的大小关系。事实上，如果让k很大，若有两只手机在下一刻多没电，显然上述方法得出的结论是错误的&…
阅读更多...
虹科干货 | 如何使用nProbe Cento构建100 Gbit NetFlow 传感器

虹科干货 | 如何使用nProbe Cento构建100 Gbit NetFlow 传感器

本文是一份全面的指南，解释了如何使用nProbe Cento构建一个高效的100 Gbit NetFlow传感器。旨在帮助大家充分利用NetFlow技术，以监控和分析高速网络流量。 当需要监控分布式网络，了解流经上行链路或关键网段的网络流量时，NetFlow…
阅读更多...
【JVM】类加载流程

【JVM】类加载流程

目录 1.加载 2.链接 （1）校验 （2）准备 （3）解析 3.初始化 4.使用 5.卸载 1.加载 加载阶段，简言之，查找并加载类的二进制数据，生成 Class 的实例 在加载类时&#x…
阅读更多...
SpringCloud_学习笔记_1

SpringCloud_学习笔记_1

SpringCloud01 1.认识微服务 随着互联网行业的发展，对服务的要求也越来越高，服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢？ 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023