学做网站培训 上海,扶贫网站建设的意义,潍坊个人网站制作,廊坊市网站推广作者#xff1a;HarderCoder ArkTS
ArkTS围绕应用开发在 TypeScript #xff08;简称TS#xff09;生态基础上做了进一步扩展#xff0c;继承了TS的所有特性#xff0c;是TS的超集
ArkTS在TS的基础上扩展了struct和很多的装饰器以达到描述UI和状态管理的目的
基本语法 … 作者HarderCoder ArkTS
ArkTS围绕应用开发在 TypeScript 简称TS生态基础上做了进一步扩展继承了TS的所有特性是TS的超集
ArkTS在TS的基础上扩展了struct和很多的装饰器以达到描述UI和状态管理的目的
基本语法 自定义组件必须使用struct定义并且被Component装饰器修饰
Component 表示这是一个自定义组件
Entry 表示该自定义组件为入口组件
State 表示组件中的状态变量状态变量变化会触发UI刷新
UI描述 以声明式的方式来描述UI的结构
自定义组件可复用的UI单元可组合其他组件
Builder/ BuilderParam
特殊的封装UI描述的方法细粒度的封装和复用UI描述
我们可以在全局或者自定义组件内定义构建函数使用构建函数可以将更细力度的复用UIBuilder 装饰的函数想要被接收接收的参数类型必须被BuilderParam装饰并且它俩的类型得匹配才可以
比如我们写卡片时都有固定的模板圆角为8背景色为白色我们就可以像下面这样封装
Component
struct MyCard {BuilderParam child: () voidbuild() {Row() {this.child()}.width(100%).borderRadius(8).backgroundColor(Color.White)}
}然后使用的时候配合上尾随闭包看起来会更自然
Component
struct CustomContainerUser {State text: string header;build() {Column() {// 创建MyCard在创建MyCard时通过其后紧跟一个大括号“{}”形成尾随闭包// 作为传递给子组件MyCard BuilderParam child: () void的参数MyCard() {Text(我是一个卡片)}}}
}Extend
扩展内置组件和封装属性样式更灵活地组合内置组件
Styles
Styles装饰器可以将多条样式设置提炼成一个方法定义在组件内容或全局从而被复用Styles仅支持 通用属性 和 通用事件 且不支持参数
// 定义在全局的Styles封装的样式
Styles function globalFancy () {.width(150).height(100).backgroundColor(Color.Pink)
}Entry
Component
struct FancyUse {State heightValue: number 100// 定义在组件内的Styles封装的样式Styles fancy() {.width(200).height(this.heightValue).backgroundColor(Color.Yellow).onClick(() {this.heightValue 200})}build() {Column({ space: 10 }) {// 使用全局的Styles封装的样式Text(FancyA).globalFancy ().fontSize(30)// 使用组件内的Styles封装的样式Text(FancyB).fancy().fontSize(30)}}
}Extend
Extend用于扩展原生组件样式,仅能定义在全局它支持参数
我们开发过程中经常需要定义字体宏进行使用在ArkTS中我们可以为Text扩展样式来实现
Extend(Text)
function PFFont(font: string PingFang) {.fontFamily(font)
}// PF_S可以调用预定义的PFFont
Extend(Text)
function PF_S(size: number 14) {.PFFont(PingFang-Sem).fontSize(size)
}Extend(Text)
function PF_R(size: number 14) {.PFFont(PingFang-Regular).fontSize(size)
}stateStyles
多态样式可以依据组件的内部状态的不同设置不同样式目前支持的状态有
focused获焦态。normal正常态。pressed按压态。disabled不可用态
状态管理 ArkTS的组件状态管理分为 管理组件拥有的状态 和 管理应用拥有的状态Components部分的装饰器为组件级别的状态管理Application部分为应用的状态管理组件的状态传递和同步类型分为 只读的单向传递 和 可变更的双向传递。
状态管理的总则
一般Prop结尾的代表的是从上到下的单向数据流动下层组件可以修改值但不会回传到上层组件。上层组件修改值之后会覆盖掉下层组件本地修改的值一般Link结尾的代表的是上层组件和下层组件的双向数据流动下层组件修改值之后会同步回上层组件
可观察的变化
非 ObjectLink和Observed
当装饰的数据类型为boolean、string、number类型时可以同步观察到数值的变化当装饰的数据类型为class或者Object时可以观察到赋值和属性赋值的变化。仅限第一层属性的变化当装饰的对象是array时可以观察到数组添加、删除、更新数组单元的变化
ObjectLink和Observed
ObjectLink和Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步
被Observed装饰的类可以被观察到属性的变化子组件中ObjectLink装饰器装饰的状态变量用于接收Observed装饰的类的实例和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被Observed装饰的项或者是class object中的属性这个属性同样也需要被Observed装饰。单独使用Observed是没有任何作用的需要搭配ObjectLink或者Prop使用
双向数据流动的设计原理 在初次渲染时上层组件的状态变量通过$state传递给下层组件下层组件拿到状态变量后将Link包装类的this指针注册给上层组件的状态变量上层组件的状态变量发生变化后会遍历依赖这个状态变量的所有组件以及我们在第一步注册的Link包装类进行更新。Link包装类更新又会导致依赖它的组件更新下层组件的Link包装类变化时调用上层组件传下来的状态变量的set方法更新状态变量的数值。然后上层组件和下层组件分别遍历各自的依赖状态变量的组件进行更新 管理组件拥有的状态
State装饰器组件内状态
State装饰的变量拥有其所属组件的状态可以作为其子组件单向和双向同步的数据源。当其数值改变时会引起相关组件的渲染刷新。State变量可以从父组件初始化也可以从组件内初始化。如果从父组件初始化组件内的初始化会被覆盖它的初始化规则如下 框架行为
当状态变量被改变时查询依赖该状态变量的组件执行依赖该状态变量的组件的更新方法组件更新渲染和该状态变量不相关的组件或者UI描述不会发生重新渲染从而实现页面渲染的按需更新
Prop装饰器父子单向同步
Prop装饰的变量可以和父组件建立单向同步关系Prop装饰的变量是可变的但修改不会同步回父组件当父组件的State变化时本地修改的Prop会被覆盖它的初始化规则如下 框架行为
初始渲染 执行父组件的build()函数将创建子组件的新实例将数据源传递给子组件初始化子组件Prop装饰的变量。 更新 子组件Prop更新时更新仅停留在当前子组件不会同步回父组件当父组件的数据源更新时子组件的Prop装饰的变量将被来自父组件的数据源重置所有Prop装饰的本地的修改将被父组件的更新覆盖。
Link装饰器父子双向同步
Link装饰的变量和父组件构建双向同步关系的状态变量父组件会接受来自Link装饰的变量的修改的同步父组件的更新也会同步给Link装饰的变量。Link装饰的变量与其父组件中的数据源共享相同的值Link装饰器不能在Entry装饰的自定义组件中使用它的初始化规则如下 框架行为
Link装饰的变量和其所属的自定义组件共享生命周期。
初始渲染执行父组件的build()函数后将创建子组件的新实例。初始化过程如下 必须指定父组件中的State变量用于初始化子组件的Link变量。子组件的Link变量值与其父组件的数据源变量保持同步双向数据同步。父组件的State状态变量包装类通过构造函数传给子组件子组件的Link包装类拿到父组件的State的状态变量后将当前Link包装类this指针注册给父组件的State变量。 Link的数据源的更新即父组件中状态变量更新引起相关子组件的Link的更新。处理步骤 通过初始渲染的步骤可知子组件Link包装类把当前this指针注册给父组件。父组件State变量变更后会遍历更新所有依赖它的系统组件elementid和状态变量比如Link包装类。通知Link包装类更新后子组件中所有依赖Link状态变量的系统组件elementId都会被通知更新。以此实现父组件对子组件的状态数据同步。 Link的更新当子组件中Link更新后处理步骤如下以父组件为State为例 Link更新后调用父组件的State包装类的set方法将更新后的数值同步回父组件。子组件Link和父组件State分别遍历依赖的系统组件进行对应的UI的更新。以此实现子组件Link同步回父组件State。
Provide装饰器和Consume装饰器与后代组件双向同步
Provide/Consume装饰的变量用于跨组件层级多层组件同步状态变量可以不需要通过参数命名机制传递通过alias别名或者属性名绑定。它的机制和Link相似但它可以跨多层管理数据而Link只能父子同步数据Provide装饰的变量在祖先节点中作为状态变量提供给后代。Consume装饰的变量在后代组件中绑定祖先节点提供的Provide变量Provider的初始化规则如下 4. Consume的初始化规则如下 框架行为
初始渲染 Provide装饰的变量会以map的形式传递给当前Provide所属组件的所有子组件子组件中如果使用Consume变量则会在map中查找是否有该变量名/alias别名对应的Provide的变量如果查找不到框架会抛出JS ERROR;在初始化Consume变量时和State/Link的流程类似Consume变量会保存在map中查找到的Provide变量并把自己注册给Provide。 当Provide装饰的数据变化时 通过初始渲染的步骤可知子组件Consume已把自己注册给父组件。父组件Provide变量变更后会遍历更新所有依赖它的系统组件elementid和状态变量Consume通知Consume更新后子组件所有依赖Consume的系统组件elementId都会被通知更新。以此实现Provide对Consume状态数据同步。 当Consume装饰的数据变化时 通过初始渲染的步骤可知子组件Consume持有Provide的实例。在Consume更新后调用Provide的更新方法将更新的数值同步回Provide以此实现Consume向Provide的同步更新。
Observed装饰器和ObjectLink装饰器嵌套类对象属性变化 仅 Observed/ObjectLink 可以观察嵌套场景其他的状态变量仅能观察第一层 Observed装饰class需要观察多层嵌套场景的class需要被Observed装饰。单独使用Observed没有任何作用需要和ObjectLink、Prop连用。ObjectLink装饰的变量接收Observed装饰的class的实例应用于观察多层嵌套场景和父组件的数据源构建双向同步。ObjectLink初始化规则 框架行为
初始渲染 Observed装饰的class的实例会被不透明的代理对象包装代理了class上的属性的setter和getter方法子组件中ObjectLink装饰的从父组件初始化接收被Observed装饰的class的实例ObjectLink的包装类会将自己注册给Observed class。 属性更新: 当Observed装饰的class属性改变时会走到代理的setter和getter然后遍历依赖它的ObjectLink包装类通知数据更新。
管理应用拥有的状态
LocalStorage页面级UI状态存储
LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“数据库”
应用程序可以创建多个LocalStorage实例LocalStorage是页面级的UI状态存储通过Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例LocalStorage也可以通过GetShared接口获取在UIAbility里创建的GetShared实现跨页面、UIAbility内共享
LocalStorageProp
LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系LocalStorageProp初始化规则如下。它从LocalStage中取key对应的值不存在的话就是用本地的默认值同时它也可以被提供给子组件初始化状态变量 框架行为
当LocalStorageProp(key)装饰的数值改变被观察到时修改不会被同步回LocalStorage对应属性键值key的属性中。当前LocalStorageProp(key)单向绑定的数据会被修改即仅限于当前组件的私有成员变量改变其他的绑定该key的数据不会同步改变。当LocalStorageProp(key)装饰的数据本身是状态变量它的改变虽然不会同步回LocalStorage中但是会引起所属的自定义组件的重新渲染。当LocalStorage中key对应的属性发生改变时会同步给所有LocalStorageProp(key)装饰的数据LocalStorageProp(key)本地的修改将被覆盖。
LocalStorageLink LocalStorageLink装饰的变量和在Component中创建与LocalStorage中给定属性建立双向同步关系。它的初始化规则和LocalStorageProp一样 框架行为
当LocalStorageLink(key)装饰的数值改变被观察到时修改将被同步回LocalStorage对应属性键值key的属性中。LocalStorage中属性键值key对应的数据一旦改变属性键值key绑定的所有的数据包括双向LocalStorageLink和单向LocalStorageProp都将同步修改当LocalStorageLink(key)装饰的数据本身是状态变量它的改变不仅仅会同步回LocalStorage中还会引起所属的自定义组件的重新渲染。
AppStorage应用全局的UI状态存储
LocalStorage是页面级的通常应用于页面内的数据共享AppStorage是一个特殊的单例LocalStorage对象是应用级的数据库和进程绑定通过 StorageProp 装饰器可以和组件联动AppStorage还相当于整个应用的“中枢” 持久化数据PersistentStorage 和 环境变量Environment 都是通过和AppStorage中转才可以和UI交互StorageProp的初始化规则如下。和LocalStorageProp相似只是取值的对象不同 StorageProp 的框架行为
当StorageProp(key)装饰的数值改变被观察到时修改不会被同步回AppStorage对应属性键值key的属性中。当前StorageProp(key)单向绑定的数据会被修改即仅限于当前组件的私有成员变量改变其他的绑定该key的数据不会同步改变。当StorageProp(key)装饰的数据本身是状态变量它的改变虽然不会同步回AppStorage中但是会引起所属的自定义组件的重新渲染。当AppStorage中key对应的属性发生改变时会同步给所有StorageProp(key)装饰的数据StorageProp(key)本地的修改将被覆盖
StorageLink的初始化规则如下。和LocalStorageLink相似只是取值的对象不同 StorageLink 的框架行为
当StorageLink(key)装饰的数值改变被观察到时修改将被同步回AppStorage对应属性键值key的属性中。AppStorage中属性键值key对应的数据一旦改变属性键值key绑定的所有的数据包括双向StorageLink和单向StorageProp都将同步修改当StorageLink(key)装饰的数据本身是状态变量它的改变不仅仅会同步回AppStorage中还会引起所属的自定义组件的重新渲染。
PersistentStorage持久化存储UI状态
LocalStorage和AppStorage都是运行时的内存PersistentStorage将选定的AppStorage属性保留在设备磁盘上应用程序通过API以决定哪些AppStorage属性应借助PersistentStorage持久化UI和业务逻辑不直接访问PersistentStorage中的属性所有属性访问都是对AppStorage的访问AppStorage中的更改会自动同步到PersistentStoragePersistentStorage的持久化变量最好是小于2kb的数据不要大量的数据持久化因为PersistentStorage写入磁盘的操作是同步的通过 PersistentStorage.PersistProp(‘aProp’, 47) 指定需要持久化的数据。它的工作过程如下 触发点击事件后 状态变量StorageLink(‘aProp’) aProp改变触发Text组件重新刷新。StorageLink装饰的变量是和AppStorage中建立双向同步的所以StorageLink(‘aProp’) aProp的变化会被同步回AppStorage中。AppStorage中“aProp”属性的改变会同步到所有绑定该“aProp”的单向或者双向变量在本示例中没有其他的绑定“aProp”的变量。因为“aProp”对应的属性已经被持久化所以在AppStorage中“aProp”的改变会触发PersistentStorage将新的改变写入本地磁盘。 后续启动应用 执行PersistentStorage.PersistProp(‘aProp’, 47)在首先查询在PersistentStorage本地文件查询“aProp”属性成功查询到。将在PersistentStorage查询到的值写入AppStorage中。在Index组件里StorageLink绑定的“aProp”为PersistentStorage写入AppStorage中的值即为上一次退出引用存入的值。
Environment设备环境查询
Environment是ArkUI框架在应用程序启动时创建的单例对象。它为AppStorage提供了一系列描述应用程序运行状态的属性Environment的所有属性都是不可变的即应用不可写入所有的属性都是简单类型设备环境到Component的更新链Environment -- AppStorage --Component
其他状态管理功能
Watch装饰器状态变量更改通知
Watch用于监听状态变量的变化当状态变量变化时Watch的回调方法将被调用Watch在ArkUI框架内部判断数值有无更新使用的是严格相等遵循严格相等规范。当在严格相等为false的情况下就会触发Watch的回调
框架行为
当观察到状态变量的变化包括双向绑定的AppStorage和LocalStorage中对应的key发生的变化的时候对应的Watch的回调方法将被触发Watch方法在自定义组件的属性变更之后同步执行如果在Watch的方法里改变了其他的状态变量也会引起状态变更和Watch的执行在第一次初始化的时候Watch装饰的方法不会被调用即认为初始化不是状态变量的改变。只有在后续状态改变时才会调用Watch回调方法
$$语法内置组件双向同步
当前$$支持基础类型变量以及State、Link和Prop装饰的变量。当前$$仅支持 Refresh 组件的refreshing参数。$$绑定的变量变化时会触发UI的同步刷新$$ 还可以用作 Builder的状态更新
渲染控制
大家直接跳到链接去看吧。里面内容很简单也很容易理解
为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》共计890页希望对大家有所帮助https://qr21.cn/FV7h05
《鸿蒙 (Harmony OS)开发学习手册》
入门必看https://qr21.cn/FV7h05
应用开发导读(ArkTS)应用开发导读(Java) HarmonyOS 概念https://qr21.cn/FV7h05
系统定义技术架构技术特性系统安全 如何快速入门https://qr21.cn/FV7h05
基本概念构建第一个ArkTS应用构建第一个JS应用…… 开发基础知识https://qr21.cn/FV7h05
应用基础知识配置文件应用数据管理应用安全管理应用隐私保护三方应用调用管控机制资源分类与访问学习ArkTS语言…… 基于ArkTS 开发https://qr21.cn/FV7h05
Ability开发UI开发公共事件与通知窗口管理媒体安全网络与链接电话服务数据管理后台任务(Background Task)管理设备管理设备使用信息统计DFX国际化开发折叠屏系列……
