学习鸿蒙基础(7)

一、@Watch状态变量更改通知
@Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变,可以使用@Watch为状态变量设置回调函数。
1、装饰器参数:必填。常量字符串,字符串需要有引号。是(string)=> void自定义成员函数的方法的引用。
2、可装饰的自定义组件变量:装饰器@State、 @Prop、@Link、@ObjectLink、@Provide、 @Consume、@StorageProp以及@StorageLink所装饰的变量均可以通过@Watch监听其变化。不允许监听常规变量。
3、装饰器的顺序:建议@State、@Prop、@Link等装饰器在@Watch装饰器之前。

示例代码:模拟购物车多选效果。显示多选的数量展示。选中的时候通过watch去监听到选中的状态。更新ui

import myList from '../components/myListWatch'
import Item from '../model/ItemFlag'@Entry
@Component
struct PageWatch {@State text: string = ''@Provide list: Item [] = [new Item(Date.now(), "房子"),new Item(Date.now(), "车子")]build() {Row() {Column() {Row(){Row() {CheckboxGroup({ group: "checkBoxGroup" })Text("全选")Button("删除").onClick(v => {this.list = this.list.filter(v =>!v.isChecked)}).margin({ left: "20" }).backgroundColor(Color.Red)}.margin({ top: "10", left: '20' })Summary()}.width("100%").justifyContent(FlexAlign.SpaceBetween)Row() {TextInput({ text: this.text }).width(250).onChange((value) => {this.text = value})Button("增加").onClick(() => {this.list.push(new Item(Date.now(), this.text))this.text = ""}).margin(10)}.width("100%").justifyContent(FlexAlign.SpaceBetween).margin(10)if (this.list.length) {ThisList()} else {Text("可你却总是笑我,一无所有")}}.width('100%').height('100%')}}
}@Component
struct ThisList {@Consume list: Item[];build() {Row() {List() {ForEach(this.list, (item, index) => {ListItem() {myList({ item, index })}.margin(10)})}.layoutWeight(1).divider({strokeWidth: 1,color: Color.Blue,startMargin: 10,endMargin: 10}).width('100%')}}
}@Component
struct Summary {@Consume list: Item[];build() {Row() {Text(`${this.getchecked()}/${this.getTotal()}`).fontSize(26).margin({'left':14})}}getchecked(){return this.list.filter(item=>item.isChecked).length}getTotal(){return this.list.length}
}

import Item from '../model/ItemFlag';
//自定义组件  组件与组件之间是隔离的
@Component
struct myListWatch {@Consume list: Item [];//把list注入进来  不用去传递了@ObjectLink @Watch("onItemChecked") item: Item;private index: number;onItemChecked(){console.log("checked")this.list.splice(this.index,1,this.item)//删除当前的对象,在插入一个改变了的对象}build() {Row() {Checkbox({group:"checkBoxGroup"}).select(this.item.isChecked).onChange(v=>{this.item.isChecked=vconsole.log(JSON.stringify(this.item))})Text(this.item.text).fontSize(20).decoration({type:this.item.isChecked?TextDecorationType.Underline:TextDecorationType.None,color:Color.Blue})Button("删除").backgroundColor(Color.Red).onClick(() => {this.list.splice(this.index, 1)})}.justifyContent(FlexAlign.SpaceBetween).width("100%")}
}export default myListObserved
@Observed class ItemFlag {id: number;text: string;isChecked:boolean;constructor(id: number, text: string,isChecked=false) {this.id = idthis.text = textthis.isChecked=isChecked}
}export  default ItemFlag

二、页面间共享状态-LocalStorage

LocalStorage是页面级的UI状态存储,通过@Entry装饰器接收的参数可以在页面内共享同一个LoalStorage实例。LocalStorage也可以在UIAbility内,页面间共享状态。
LocalStorage根据与@Component装饰的组件的同步类型不同,提供了两个装饰器:
@LocalStorageProp: @LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系。
@LocalStorageLink:  @LocalStorageLink装饰的变量和在@Component中创建与LocalStorage中给定属性建立双向同步关系。

import router from '@ohos.router'
let storage=LocalStorage.GetShared()
@Entry(storage)
@Component
struct PageLocalStorage {@State message: string = 'Hello World'// @LocalStorageProp("name") n: string = ''@LocalStorageLink("name") n: string = ''build() {Row() {Column() {Text(this.n).fontSize(50).fontWeight(FontWeight.Bold)Button("跳转").onClick(v => {router.pushUrl({url:"pages/PageLSDetail"})})Son1()}.width('100%')}.height('100%')}
}@Component
struct  Son1{@LocalStorageLink("name") m:string =""build(){Row(){Text(`child-${this.m}`)}}
}
import router from '@ohos.router'let storage=LocalStorage.GetShared()
@Entry(storage)
@Component
struct PageLSDetail {@State message: string = 'Hello World'@LocalStorageLink("name") name:string=''build() {Row() {Column() {Text(this.name).fontSize(50).fontWeight(FontWeight.Bold)Button("返回").onClick(v => {this.name="車子"router.back()})}.width('100%')}.height('100%')}
}
import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';export default class EntryAbility extends UIAbility {storage:LocalStorage =new LocalStorage({name:"房子"})onCreate(want, launchParam) {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');}onDestroy() {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');}onWindowStageCreate(windowStage: window.WindowStage) {// Main window is created, set main page for this abilityhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent('pages/PageLocalStorage', this.storage,(err, data) => {if (err.code) {hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');return;}hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');});}onWindowStageDestroy() {// Main window is destroyed, release UI related resourceshilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');}onForeground() {// Ability has brought to foregroundhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');}onBackground() {// Ability has back to backgroundhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');}
}

三、AppStorage-应用全局的UI状态存储-非持久化

AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。仅仅存储在内存当中。退出程序后。数据就丢失了。
AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储,这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。
Appstorage可以和UI组件同步,且可以在应用业务逻辑中被访问。

    AppStorage.SetOrCreate("name","房子")
  @StorageProp("name") name:string =""

 

  @StorageLink("name") appname: string = ''

 四、PersistentStorage-持久化存储UI状态

PersistentStorage是应用程序中的可选单例对象。此对象的作用是持久化存储选定的AppStorage属性,以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。
PersistentStorage允许的类型和值有:
1、number,stringboolean,enum 等简单类型
2、可以被SON.stringify0和SON.parse0重构的对象。例如Date, Map, Set等内置类型则不支持,以及对象的属性方法不支持持久化了
注意:
PersistentStorage的持久化变量最好是小于2kb的数据,不要大量的数据持久化,因为PersistentStorage写入磁盘的操作是同步的,大量的数据本地化读写会同步在UI线程中执行,影响UI渲染性能。如果开发者需要存储大量的数据,建议使用数据库api。
PersistentStorage只能在UI页面内使用,否则将无法持久化数据。

//只能在page页面中,才能持久化。
PersistentStorage.PersistProp("name","房子")
  @StorageProp("name") name:string =""

 

  @StorageLink("name") appname: string = ''

 

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

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

相关文章

Spring Transaction 指定事务管理器问题

一,单个数据源,单个事务管理器与Transactional默认事务管理器名称不一致问题 在平时代码中使用声明性事务时,直接在方法上面加注解即可,如下 Transactional(rollbackFor Exception.class) 并没有指定事务管理器,为…

人工智能|推荐系统——搜索引擎广告

原文题目 Dark sides of artificial intelligence: The dangers of automated decision-making in search engine advertising(JASIST,2023) 人工智能的阴暗面:搜索引擎广告自动决策的危险 摘要 随着人工智能应用的日益广泛,搜索引擎供应商越来越多地要求广告商使用基于机…

Linux内核之debugfs_create_dir与debugfs_create_file实例与调用栈流程(三十二)

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

Flink集群主节点JobManager启动分析

1.概述 JobManager 是 Flink 集群的主节点,它包含三大重要的组件: ResourceManager Flink集群的资源管理器,负责slot的管理和申请工作。 Dispatcher 负责接收客户端提交的 JobGraph,随后启动一个Jobmanager,类似 Yarn…

动态内存管理+柔性数组

动态内存存在的意义 C语言是一种过程式编程语言,提供了底层访问能力和丰富的功能,广泛应用于操作系统、嵌入式系统、硬件驱动程序等领域。C语言的动态内存管理主要是通过malloc()、calloc()、realloc()和free()这几个标准库函数来实现的。 理解动态内存…

图论- 最小生成树

一、最小生成树-prim算法 1.1 最小生成树概念 一幅图可以有很多不同的生成树,比如下面这幅图,红色的边就组成了两棵不同的生成树: 对于加权图,每条边都有权重(用最小生成树算法的现实场景中,图的边权重…

151 shell编程,正则表达式,在C语言中如何使用正则表达式

零,坑点记录:bash 和 dash 的区别,导致的坑点 查看当前用的shell 是啥,用的是/bin/bash hunandedehunandede-virtual-machine:~$ echo $SHELL /bin/bash 当shell 脚本运行的时候(后面会学到方法,这里是最…

什么是搜索引擎(SEO)爬虫它们是如何工作的?

什么是搜索引擎(SEO)爬虫&它们是如何工作的? 你的网站上有蜘蛛🕷️。别抓狂!我说的不是真正的八条腿的蜘蛛🕷️。 我指的是搜索引擎优化爬虫。他们是实现SEO的机器人。每个主要的搜索引擎都使用爬虫来…

蓝队面经(一)

蓝队面经(一) 文章目录 蓝队面经(一)入侵排查思路windows入侵排查思路Linux入侵排查思路 Linux 如何查看登录日志Windows 和 Linux 的日志文件放在哪里?WindowsLinux Linux 常用排查命令有哪些?Linux 的 Selinux 是什么?如何设置 Selinux&…

第十二章:预处理命令

文章目录 第十二章:预处理命令宏定义无参宏定义带参数的宏定义 文件包含处理 第十二章:预处理命令 作用:由编译预处理程序对程序中的特殊命令作出解释,以产生新的源程序对其进行正式编译 C语言与其他语言的重要区别就是可以使用预…

前端bugs

问题: Failed to load plugin typescript-eslint declared in package.json eslint-config-react-app#overrides[0]: Cannot find module eslint/package.json 解决: google了一晚上还得是chatgpt管用 运行以下命令【同时还要注意项目本身使用的Node版…

Windows 远程访问 Ubuntu Desktop - 虚拟网络控制台 (Virtual Network Console,VNC)

Windows 远程访问 Ubuntu Desktop - 虚拟网络控制台 [Virtual Network Console,VNC] References 1. Desktop Sharing 2. Desktop Sharing Preferences 勾选 允许其他人查看您的桌面 勾选 要求远程用户输入此密码 取消勾选 必须为对本机器的每次访问进行确定 3. 虚拟…

【QT学习】1.qt初识,创建qt工程,使用按钮,第一个交互按钮

1.初识qt--》qt是个框架,不是语言 1.学习路径 一 QT简介 ,QTCreator ,QT工程 ,QT的第一个程序,类,组件 二 信号与槽 三 对话框 四 QT Desiner 控件 布局 样式 五 事件 六 GUI绘图 七 文件 八 …

js的一些底层

数据类型 按照存储方式,JavaScript的数据类型可以分为两种,原始数据类型(原始值)和引用数据类型(引用值)。 原始数据类型目前有六种,包括Number、String、Boolean、Null、Undefined、Symb…

若依ruoyi-vue实现excel导入导出

文章目录 Excel注解excel数据导入前端实现后端实现 下载模板前端实现后端实现 excel数据导出前端实现后端实现 自定义标题信息导出用户管理表格新增标题(用户列表)导入表格包含标题处理方式 自定义数据处理器自定义隐藏属性列导入对象的子对象导出对象的…

网络安全新视角:数据可视化的力量

在当今数字化时代,网络安全已成为各大企业乃至国家安全的重要组成部分。随着网络攻击的日益复杂和隐蔽,传统的网络安全防护措施已难以满足需求,急需新型的解决方案以增强网络防护能力。数据可视化技术,作为一种将复杂数据转换为图…

5-规范设计(下):commit信息风格迥异、难以阅读,如何规范?

我们在做代码开发时,经常需要提交代码,提交代码时需要填写 Commit Message(提交说明),否则就不允许提交。 所以在 Go 项目开发时,一个好的 Commit Message 至关重要: 可以使自己或者其他开发人…

mapbox-gl扩展sprites图片

在mapbox-gl.js中,通过在styles中设置sprite和glyphs,实现样式图标和字体的加载。而一旦style加载完成,如果重置地图中的style,则会导致地图全部重新加载,图层的顺序,地图上的要素,都会丢失&…

Halcon3D表面平面度检测-平面差值法

//倾斜平面矫正 https://blog.csdn.net/m0_51559565/article/details/137146179前言 通常我们对表面平面度进行检测时,通常使用2种方式。1:通过大卷积核的高斯滤波进行拟合平面,然后求取拟合平面与3D模型间的点间的距离。2:通过平…

lua脚本在redis集群中哈希槽分片问题

上文说到,通过用redis lua脚本实现时间窗分布式限流 可以操作redis lua脚本来实现时间窗限流,在执行lua脚本的时候,参数中有个keys列表,当lua脚本中如果有操作多个key的情况,就可以传个key列表了。通常情况下&#xff…