鸿蒙应用开发之组件状态管理

news2024/11/16 1:45:01

一、概述

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

图片

图片

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变量的必须是在父组件中定义的状态变量。

图片

图片

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

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

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

图片

图片

在子目标列表中，每个列表项都有其位置索引值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数据的更新后，会触发当前自定义组件的重新渲染。

使用@Provide的好处是开发者不需要多次将变量在组件间传递。@Provide和@Consume的具体使用方法请参见开发指南：@Provide装饰器和@Consume装饰器：与后代组件双向同步。

参考代码：https://gitee.com/harmonyos/codelabs/tree/master/TargetManagement

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

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

相关文章

神经网络画图？PPT就够了

神经网络画图？PPT就够了

在写项目文档或者论文，甚至是开组会的时候都需要画出模型的图片，但一些高端的画图软件或网站不太会用，而且我们画的模型又没有很复杂，大可不必花太多时间。 但问题是一些免费的画图工具效果不佳，要么图片不好看&#…
阅读更多...
完整搭建Git服务器

完整搭建Git服务器

文章目录 搭建Git服务器第一步，安装git：第二步，创建一个git用户，用来运行git服务第三步，添加SSH公钥第四步，初始化Git仓库：第五步，连接Git服务器 搭建Git服务器 GitHub就是一个免费…
阅读更多...
【斗破年番】美杜莎女王怀孕和萧潇被删，官方真敢这么做吗？结局一定会很惨

【斗破年番】美杜莎女王怀孕和萧潇被删，官方真敢这么做吗？结局一定会很惨

Hello,小伙伴们，我是小郑继续为大家深度解析斗破苍穹年番国漫资讯。 随着《斗破苍穹》年番即将更新，传出美杜莎女王怀孕和萧潇的剧情将被删减魔改的消息，引发网友激烈讨论。 根据网友透露的消息，美杜莎女王怀孕的设定甚至萧潇都可…
阅读更多...
轻资产、降成本、快速上市!ODM/OEM 专题闪耀登场！

轻资产、降成本、快速上市!ODM/OEM 专题闪耀登场！

轻资产、降成本、快速上市!ODM/OEM 专题闪耀登场 swop2023包装世界(上海)博览会引爆创新潮流 消费者对个性化需求、情感诉求和创新创意的要求不断增长,这对品牌商提出了更高的要求。品牌方不仅需要注重外观设计,还要关注产品实力和品质,同时控制成本,上市速度等,才能在激烈的…
阅读更多...
低调而无为而治，藏在超级应用背后的道家哲学

低调而无为而治，藏在超级应用背后的道家哲学

众所周知，Elon Musk 想将 Twitter 重新设计定位成一款“超级应用 - X”的野心已经不再是秘密。伴随着应用商店中 Twitter 标志性的蓝鸟 Logo 被 X 取代后，赛博世界充满了对这件事情各种角度的探讨与分析。 Musk 曾经无数次通过微信这一样本来推广他的“超…
阅读更多...
00后都到适婚年龄啦！90后的还在低调什么？

00后都到适婚年龄啦！90后的还在低调什么？

当你的想法还停留在00后读书时代，其实大部分00后早已步入工作社会，还有不少人已经步入婚姻。广东金媒人婚恋，无论是广州、深圳、东莞、佛山举办活动的参与者中，00后的男生女生都占了不少。 广州深圳这样一二线城市的单身年轻人群&…
阅读更多...
Note—— OSError np.degress() scipy.signal.argrelextrema

Note—— OSError np.degress() scipy.signal.argrelextrema

OSError Flask项目 python filename.py 报错 地址已被使用 搜索相关问题后发现是因为，你曾启动过相同或者类似的服务占用了这个端口（一般来讲，在Mac上直接用Python启动的话，会导致退出不完整，你不能通过点击GUI的“退…
阅读更多...
华为云Stack的学习（十）

华为云Stack的学习（十）

十一、华为云Stack容器服务介绍 1.云容器引擎服务CCE 云容器引擎（Cloud Container Engine，CCE）提供高度可扩展的、高性能的企业级Kubernetes集群，支持运行Docker容器。借助云容器引擎，可以在云上轻松部署、管理和扩展…
阅读更多...
SpringFramework之基于配置类管理Bean

SpringFramework之基于配置类管理Bean

1、完全注解开发理解 Spring 完全注解配置（Fully Annotation-based Configuration）是指通过 Java配置类 代码来配置 Spring 应用程序，使用注解来替代原本在 XML 配置文件中的配置。相对于 XML 配置，完全注解配置具有更强的类型安…
阅读更多...
深度剖析Android Binder IPC机制

深度剖析Android Binder IPC机制

Android系统的成功离不开其强大的IPC（Inter-Process Communication）机制，其中最引人注目的就是Binder。本文将深入探讨Binder的技术原理，解释其工作方式以及相关的关键概念。 什么是Binder Binder是Android系统中的IPC机制&…
阅读更多...
【递归、搜索与回溯算法】第一节.初识递归、搜索与回溯算法

【递归、搜索与回溯算法】第一节.初识递归、搜索与回溯算法

作者简介：大家好，我是未央； 博客首页：未央.303 系列专栏：递归、搜索与回溯算法 每日一句：人的一生，可以有所作为的时机只有一次，那就是现在！！！&am…
阅读更多...
hive一行多列合并为一行一列

hive一行多列合并为一行一列

SELECT named_struct(name, John, age, 30, city, New York) AS person;
阅读更多...
【前端】Layui小功能收集整理

【前端】Layui小功能收集整理

目录 1、layui 鼠标悬浮提示文字 2、关闭当前窗口并刷新父页面 3、子iframe关闭/传值/刷新父页面 1、layui 鼠标悬浮提示文字 鼠标放在图标上悬浮显示提示信息&#xff0c;效果图如下 <div style"float:left; line-height:40px">道试题 <i class"l…
阅读更多...
【MySQL进阶之路丨第十篇】一文带你精通MySQL排序、分组、连接

【MySQL进阶之路丨第十篇】一文带你精通MySQL排序、分组、连接

引言 在上一篇中我们介绍了MySQL子句&#xff1b;在开发中&#xff0c;掌握数据的排序、分组、连接等操作和语句是十分重要的。 这一篇我们使用命令行方式来帮助读者掌握MySQL中数据的排序、分组与连接。 上一篇链接&#xff1a;MySQL | 一文带你精通MySQL子句 MySQL排序 MySQ…
阅读更多...
ChatGPT在测试计划中的应用策略

ChatGPT在测试计划中的应用策略

简介 测试计划是指描述了要进行的测试活动的范围、方法、资源和进度的文档。它主要包括测试项、被测特性、测试任务和风险控制等。 所以在使用ChatGPT输出结果之前&#xff0c;我们需要先将文档的内容框架梳理好&#xff0c;以及将内容范围划定好&#xff0c;必要的时候&…
阅读更多...
学生学徒作品分享——金融大模型-房屋租金价格影响因素分析与预测

学生学徒作品分享——金融大模型-房屋租金价格影响因素分析与预测

金融大模型-房屋租金价格影响因素分析与预测项目背景 广州作为中国最发达的城市之一&#xff0c;每年都吸引大量务工人员前来就业&#xff0c;而租房是他们需要解决的最大问题之一&#xff0c;各地区租房需求日益增长。在租房过程&#xff0c;价格、交通是重要的考虑因素&a…
阅读更多...
vue3同时引入多个iconfont图标库

vue3同时引入多个iconfont图标库

vue3同时引入多个iconfont图标库 本文目录 vue3同时引入多个iconfont图标库下载iconfont库创建项目库图标加入项目库下载到本地 vue3引入文件存放位置main.ts设置组件中使用 分别引入多个iconfont 下载iconfont库 创建项目库 iconfont官网&#xff1a;https://www.iconfont.c…
阅读更多...
物联网_01_物理设备的网络接入

物联网_01_物理设备的网络接入

设备的网络接入及物理层使用到的传输协议 现在物理设备有两种接入方式,一种是直接接入另一种是网关接入 直接接入 给物理设备添加NB-IOT通信模组等设备使之具有直接接入网络的能力 网关接入 物理设备在本地组网后通过统一的网关接入到网络(ZigBee无线组网网关).网关是处在本地…
阅读更多...
Win10使用nginx，注册到服务设置自启与后台运行，解决 Access is denied 问题

Win10使用nginx，注册到服务设置自启与后台运行，解决 Access is denied 问题

安装 nginx 下载 nginx 官网下载页面&#xff1a;https://nginx.org/en/download.html直接选择当前最新 window 版本的或找到自己需要的版本下载即可 安装使用 下载完成后是有一个压缩包文件&#xff0c;直接解压到自己需要的目录下即可。是免安装的&#xff0c;解压即用简…
阅读更多...
2023年中国功能型内窥镜市场发展趋势分析：市场渗透潜力空间广阔[图]

2023年中国功能型内窥镜市场发展趋势分析：市场渗透潜力空间广阔[图]

4K内窥镜系统对图像算法存在更高的要求。仅采用软件方式处理图像难以符合4K系统对算力的高要求。其次&#xff0c;针对内窥镜图像的亮暗区域不均匀、饱和度低、细节纹理及组织结构需突出的特点&#xff0c;在选择合适的图像增强算法上难度较大。 功能型内窥镜行业壁垒分析 资料…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023