做的最好的宠物网站,怎样在局域网做网站,安阳 网站建设,国家企业信用信息公示系统(安徽)介绍
本示例通过使用页面级的状态变量 和应用级的状态变量 来实现应用的状态管理。
效果预览 使用说明
1.点击首页中的基本类型进入对应页面#xff0c;点击按钮可以更改圆形的颜色#xff1b;点击查看源码可以展示基本类型功能效果的源码。
2.点击首页中的数组类型进入对…介绍
本示例通过使用页面级的状态变量 和应用级的状态变量 来实现应用的状态管理。
效果预览 使用说明
1.点击首页中的基本类型进入对应页面点击按钮可以更改圆形的颜色点击查看源码可以展示基本类型功能效果的源码。
2.点击首页中的数组类型进入对应页面点击新增元素可以添加数据点击删除元素可以删除数据当数据为空时点击删除会弹出一个提示窗点击更新数组中的某个元素可以更改第一条数据的age属性当数据为空时同样会弹出一个提示窗点击查看源码可以展示数组类型功能效果的源码。
3.点击首页中的类对象类型进入对应页面点击更新对象可以更改对象属性和对象属性中的属性点击更新对象属性对象属性数据发生变化点击更新属性中的属性对象属性的属性数据发生变化点击查看源码可以展示类对象类型功能效果的源码。
4.点击首页中的只更新所绑定的组件进入对应页面点击修改标题和内容标题和内容数据都发生变化页面更新标题数据内容数据不刷新点击查看源码可以展示类对象类型功能效果的源码。
5.点击单、双向同步进入对应页面点击设置为粉色按钮父组件圆形颜色更新两个子组件颜色同步更新点击设置为蓝色按钮子组件A圆形颜色更新父组件和子组件B颜色不更新点击设置为红色按钮子组件B圆形颜色更新父组件和子组件A圆形颜色同步更新点击查看源码可以展示单、双向同步功能效果的源码。
6.点击子组件同步父组件的部分内容进入对应页面点击父组件中的属性1修改数据子组件中的属性1数据同步点击子组件的属性1修改数据父组件中的属性1数据同步点击查看源码可以展示子组件同步父组件的部分内容功能效果的源码。
7.点击爷孙组件之间状态同步进入对应页面点击爷组件下拉框组件选择颜色下拉框文本和圆形颜色改变孙组件下拉框文本和圆形颜色同步刷新点击孙组件下拉框选择颜色下拉框文本和圆形颜色改变爷组件下拉框文本和圆形颜色同步刷新点击查看源码可以展示爷孙组件之间状态同步功能效果的源码。
8.点击兄弟组件之间状态同步进入对应页面点击兄弟A组件下拉框选择颜色下拉框文本和圆形颜色改变兄弟B组件下拉框文本和圆形颜色同步刷新点击兄弟B组件下拉框选择颜色下拉框文本和圆形颜色改变兄弟A组件下拉框文本和圆形颜色同步刷新点击查看源码可以展示爷孙组件之间状态同步功能效果的源码。
9.点击应用内全局数据与UI之间的状态同步进入对应页面点击修改夜间模式状态和字体大小当前夜间模式状态以及字体大小发生变化进入Ability1和Ability2页面夜间模式状态以及字体大小同步更新在Ability1界面中改变夜间模式状态和字体大小夜间模式状态和字体大小发生变化进入到主页面和Ability2页面夜间模式状态同步更新字体大小不变在Ability2界面中修改夜间模式状态夜间模式状态发生改变进入到主页面和Ability1页面夜间模式状态同步点击查看源码可以展示应用内全局数据与UI之间的状态同步功能效果的源码。
10.点击Ability内全局数据与UI之间的状态同步进入对应页面点击修改夜间模式状态和字体大小当前夜间模式状态以及字体大小发生变化时进入Page1和Page2以及跨Ability不同步页面Page1和Page2夜间模式状态以及字体大小同步更新,跨Ability页面不同步更新在Page1界面中改变夜间模式状态和字体大小夜间模式状态和字体大小发生变化进入到主页面、Page2和跨Ability不同步页面主页面和Page2夜间模式状态同步更新但是字体不发生变化跨Ability页面夜间模式状态和字体都不同步更新在Page2界面中修改夜间模式状态夜间模式状态发生改变进入到主页面、Page1页面和跨Ability不同步页面主页和Page1夜间模式状态同步跨Ability页面都不同步更新在跨Ability界面中修改夜间模式状态夜间模式状态发生改变进入主页、Page1和Page2页面夜间模式状态不同步点击查看源码可以展示Ability内全局数据与UI之间的状态同步功能效果的源码。
工程目录
entry/src/main/ets/
|---commoncomponents
| |---CodeView.ets // 代码展示组件
| |---TitleBar.ets // 标题组件
| |---TitleBarDark.ets // 夜间模式下标题组件
| |---ViewCodeText.ets // 查看源码文本组件
|---entryability
| |---EntryAbility.ts
|---outofsyncability
| |---OutOfSyncAbility.ts
|---MainAbility
|---pages
| |---applylevelstagemanagement // 应用级状态管理
| | |---abilityglobaldatasync // Ability内全局数据与UI之间的状态同步
| | | |---AbilityGlobalDataSync.ets
| | | |---AbilityGlobalDataSyncCode.ets // Ability内全局数据与UI之间的状态同步主页
| | | |---AbilityOutOfSyncPage.ets // 跨Ability页面
| | | |---LocalStorageLinkPage.ets // 展示LocalStorageLink效果页面
| | | |---LocalStoragePropPage.ets // 展示LocalStorageProp效果页面
| | |---applyglobaldatasync // 应用内全局数据与UI之间的状态同步
| | | |---ApplyGlobalDataSync.ets
| | | |---ApplyGlobalDataSyncCode.ets // 应用内全局数据与UI之间的状态同步主页
| | | |---StorageLinkAbilityPage.ets // 展示StorageLinkAbility页面
| | | |---StoragePropAbilityPage.ets // 展示StoragePropAbility页面
| | |---model
| | | |---AbilityConfigType.ets // Ability参数类型
| | | |---CommonMethods.ets // 公用函数启动Ability
| |---home
| | |---data
| | | |---HomeData.ets // 首页数据
| | |---model
| | | |---CategoricalDataType.ets // 层级类型
| | |---Home.ets // 首页
| | |---TabContentNavigation.ets // Tab内容区组件
| |---pagelevelstagemanagement // 页面级状态管理
| | |---multicompomentssync // 自定义组件之间的状态同步
| | | |---brothercomponentssync // 兄弟组件之间状态同步
| | | | |---BrotherComponentSync.ets
| | | | |---BrotherComponentSyncCode.ets // 兄弟组件之间状态同步首页
| | | | |---ConsumeBrotherOneComponent.ets // Consume状态变量组件
| | | | |---ConsumeBrotherTwoComponent.ets // Consume状态变量组件
| | | | |---LinkBrotherOneComponent.ets // Link状态变量组件
| | | | |---LinkBrotherTwoComponent.ets // Link状态变量组件
| | | | |---ProvideAndConsumeSync.ets // Privide状态变量组件
| | | | |---StateAndLinkSync.ets // State状态变量组件
| | | |---data
| | | | |---ColorData.ets // 颜色数据
| | | |---deepnestcomponentssync // 爷孙组件嵌套
| | | | |---ConsumeDescendentComponent.ets // Consume孙组件
| | | | |---DeepNestComponentsSync.ets
| | | | |---DeepNestComponentsSyncCode.ets // 爷孙组件首页
| | | | |---LinkDescendentComponent.ets // Link孙组件
| | | | |---ProvideAndConsumeSync.ets // Provide爷组件
| | | | |---StateAndLinkSync.ets // State爷组件
| | | |---model
| | | | |---ColorType.ets // 颜色数据类型
| | | |---parentchildcomponentsync // 父子组件之间状态同步
| | | | |---parentchildpartialcontentsync // 子组件同步父组件部分内容
| | | | | |---ObjectLinkComponent.ets // ObjectLink子组件
| | | | | |---ParentChildPartialContentSync.ets
| | | | | |---ParentChildPartialContentSyncCode.ets // Observer父组件
| | | | |---uniandbidirectionsync // 单、双向同步
| | | | | |---ComponentLink.ets // Link组件
| | | | | |---ComponentProp.ets // Prop组件
| | | | | |---UniAndBidirectionSync.ets
| | | | | |---UniAndBidirectionSyncCode.ets // State父组件
| | |---singlecomponentstatevariables // 单组件的状态同步
| | | |---decoratedobjecttype // 修饰的对象类型
| | | | |---arraytype // 数组类型
| | | | | |---ArrayType.ets
| | | | | |---ArrayTypeCode.ets // 数组类型源码页
| | | | |---basetype // 基本类型
| | | | | |---BaseType.ets
| | | | | |---BaseTypeCode.ets // 基本类型源码页
| | | | |---classobjecttype // 对象类型
| | | | | |---ClassObjectType.ets
| | | | | |---ClassObjectTypeCode.ets // 对象类型源码页
| | | |---updatetactics // 更新原理
| | | | |---updateboundcomponent // 只更新所绑定的组件
| | | | | |---UpdateBoundComponent.ets
| | | | | |---UpdateBoundComponentCode.ets // 只更新所绑定的组件源码
|---storagelinkability
| |---StorageLinkAbility.ts
|---storagepropability
| |---StoragePropAbility.ts
|---utils
| |---Logger.ts // 日志文件
| |---ResourceUtils.ts // 资源转换方法
| |---StartAbilityUtils.ts // 启动Ability方法具体实现
查看源码通过private controller: webView.WebviewController newwebView.WebviewController()声明一个状态变量使用this.controller.loadUrl(url)来打开web页面。基本类型使用State声明一个Resource类型的circleColor状态变量然后通过点击事件根据circleColor的id来改变圆形颜色。数组类型使用State声明一个数组arrayTypeData状态变量数据元素为newArrayDataType()通过arrayTypeData.push()方法来新增元素数据arrayTypeData.splice()方法删除元素更新指定newArrayDataType()来实现更新某一个元素数据。类对象类型使用Observerd声明一个属性类ChildClass然后声明一个对象类ParentClass并将对象的其中一个属性类型设置为属性类使用State声明一个类对象数据状态变量classObjectData更新对象可以通过newParentClass()生成一个对象并赋值来实现更新对象属性可以通过this.classOjectData.attribute来实现更新对象属性的属性可以通过ObjectLink声明一个状态变量并更新此状态变量的对象属性来实现。只更新所绑定的组件使用State和Private声明一个titleName和content状态变量通过点击事件修改这两个状态变量。单、双向同步父组件使用State声明一个状态变量circleColor并作为参数给子组件A和子组件B子组件A通过Prop接收子组件B通过Link来接收通过点击事件中的this.circleColor COLOR_DATA.PINK来更改颜色。子组件同步父组件部分内容父组件中使用State声明一个数组状态变量parentDataObserved声明数组元素的类父组件向子组件传递parentData的某一个元素数据子组件通过ObjectLink来接收父组件通过this.childObject.attributeType value来修改元素数据子组件同步更新子组件同样通过this.childObjectData.attributeType value来修改子组件的数据父组件同步更新。爷孙组件之间状态同步爷组件通过State声明一个控制圆形颜色的状态变量circleColor和控制当前Select组件Index的状态变量currentSelectIndex逐层传递给子组件给孙组件通过Link接收爷组件通过onSelect事件来修改circleColor和currentSelectIndex孙组件同样通过onSelect事件来修改circleColor和currentSelectIndex然后爷组件通过Provide声明一个控制圆形颜色的状态变量consumeCircleColor和控制当前Select组件Index的状态变量currentSelectIndex孙组件通过Consume来接收爷组件通过onSelect事件来修改circleColor和currentSelectIndex孙组件同样通过onSelect事件来修改circleColor和currentSelectIndex。兄弟组件之间状态同步父组件通过State声明一个控制圆形颜色的状态变量circleColor和控制当前Select组件Index的状态变量currentSelectIndex传递给子组件A和子组件B两者通过Link接收子组件A通过onSelect事件来修改circleColor和currentSelectIndex子组件B同样通过onSelect事件来修改circleColor和currentSelectIndex然后父组件通过Provide声明一个控制圆形颜色的状态变量consumeCircleColor和控制当前Select组件Index的状态变量currentSelectIndex子组件A和子组件B通过Consume来接收子组件A通过onSelect事件来修改circleColor和currentSelectIndex子组件B同样通过onSelect事件来修改circleColor和currentSelectIndex。应用内全局数据与UI之间的状态同步主页、Ability1页面和Ability2页面通过StorageLink声明一个控制夜间模式的状态变量currentModelStatus在主页面通过onChange事件中的AppStorage.SetOrCreate(‘currentModelStatus’,this.currentModelStatus)来更改夜间模式的状态在Ability1页面和Ability页面通过onClick事件中的this.currentModelStatus !this.currentModelStatus主页和Ability2页面通过StorageLink声明一个控制字体大小的状态变量contentFontSizeAbility1页面通过StorageProp声明一个控制字体大小的状态变量contentFontSize主页使用onChange事件中的this.contentFontSize value和AppStorage.SetOrCreate(‘contentFontSize’, this.contentFontSize)来更改内容字体的大小Ability1通过onChange事件中的this.contentFontSize value来修改内容字体大小。Ability内全局数据与UI之间的状态同步在Entry当中声明一个storage并通过this.storage.setOrCreate(‘currentModelStatus’,true)和this.storage.setOrCreate(‘contentFontSize’,18)来设置夜间模式状态变量currentModelStatus和字体大小状态变量contentFontSize然后主页、Page1页面、Page2页面和跨Ability页面通过LocalStorageLink声明一个控制夜间模式的状态变量currentModelStatus在主页面通过onChange事件中的this.currentModelStatus isOn来更改夜间模式的状态Page1页面、Page2页面和跨Ability页面通过onClick事件中的this.currentModelStatus !this.currentModelStatus来更改夜间模式的状态主页、Page1页面和跨Ability页面通过LocalStorageLink声明一个控制字体大小的状态变量contentFontSizePage1页面通过LocalStorageProp声明一个控制字体大小的状态变量contentFontSize主页使用onChange事件中的this.contentFontSize value和AppStorage.SetOrCreate(‘contentFontSize’, this.contentFontSize)来更改内容字体的大小Page2通过onChange事件中的this.contentFontSize value来修改内容字体大小。
相关权限
不涉及。
依赖
不涉及。
约束与限制
1.本示例仅支持标准系统上运行。
2.本示例已适配API version 9版本SDK版本号4.0.5.2。
3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)才可编译运行。
下载
如需单独下载本工程执行如下命令
git init
git config core.sparsecheckout true
echo code/UI/StateManagement/ .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master为了帮助大家更深入有效的学习到鸿蒙开发知识点小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源获取完整版方式请点击→HarmonyOS教学视频https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
HarmonyOS教学视频语法ArkTS、TypeScript、ArkUI等…视频教程 鸿蒙生态应用开发白皮书V2.0PDF 获取完整版白皮书方式请点击→https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG?ua42c4946d1514235863bb82a7b2ac128 鸿蒙 (Harmony OS)开发学习手册→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
一、入门必看
1.应用开发导读(ArkTS) 2………
二、HarmonyOS 概念→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.系统定义 2.技术架构 3.技术特性 4.系统安全 5…
三、如何快速入门→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.基本概念 2.构建第一个ArkTS应用 3…
四、开发基础知识→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.应用基础知识 2.配置文件 3.应用数据管理 4.应用安全管理 5.应用隐私保护 6.三方应用调用管控机制 7.资源分类与访问 8.学习ArkTS语言
五、基于ArkTS 开发→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.Ability开发 2.UI开发 3.公共事件与通知 4.窗口管理 5.媒体 6.安全 7.网络与链接 8.电话服务 9.数据管理 10.后台任务(Background Task)管理 11.设备管理 12.设备使用信息统计 13.DFX 14.国际化开发 15.折叠屏系列
更多了解更多鸿蒙开发的相关知识可以参考https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
