老酒街 wordpress,百度优化 几个网站内容一样,徐州网站建设新闻,百度建站云南服务中心这一节主要了解一下鸿蒙里的装饰器,装饰器是一种特殊的语法结构#xff0c;用于装饰类、结构体、方法以及变量;
1 Component在鸿蒙#xff08;HarmonyOS#xff09;开发中扮演着重要角色#xff0c;主要用于定义可重用的UI组件,主要作用:1)组件化#xff1a;Component装饰… 这一节主要了解一下鸿蒙里的装饰器,装饰器是一种特殊的语法结构用于装饰类、结构体、方法以及变量;
1 Component在鸿蒙HarmonyOS开发中扮演着重要角色主要用于定义可重用的UI组件,主要作用:1)组件化Component装饰的struct表示该结构体具有组件化能力能够成为一个独立的组件。这使得开发者可以将UI界面拆分成多个可复用的部分提高代码的可维护性和复用性。 2)生命周期管理被Component装饰的组件可以调用组件的生命周期函数如aboutToAppear组件即将出现时回调和aboutToDisappear组件即将销毁前回调从而进行资源管理和状态更新。3)UI绘制每个被Component装饰的组件都必须包含一个build()函数该函数用于绘制组件的UI界面。这体现了声明式UI的核心思想即数据驱动页面更新。
import { Text, Button, Column } from ohos.agp.components; // 使用Component装饰struct定义计数器组件
Component
struct Counter { State private count: number 0; // build函数用于绘制组件的UI界面 build() { Column() { // 显示计数值 Text(${this.count}).fontSize(24) // 增加计数值的按钮 Button(增加) .onClick(() { this.count; // 修改State变量的值触发UI更新 }) } }
} Entry
Component
struct App { build() { Column() { // 使用Counter组件 Counter() } }
}
2 Entry在鸿蒙中扮演着至关重要的角色主要用于标识页面的入口组件。主要作用:1)页面入口标识Entry装饰的自定义组件会被视为当前页面的默认入口组件。在鸿蒙应用中每个页面都是由一系列组件组合而成的而Entry装饰的组件则是这些组件的根节点负责页面的初始化和呈现。2)预览支持在使用预览器如Previewer进行页面预览时Entry装饰的组件会被首先创建并呈现方便开发者在开发过程中实时查看页面的效果。3)组件树结构在鸿蒙的组件化开发模式中页面由多个组件构成这些组件之间形成了一种树状结构。Entry装饰的组件位于这棵树的根部是页面加载和渲染的起点。
import { TextInput, Button, Column } from ohos.agp.components;
Entry
Component
struct LoginPage { // build函数用于绘制登录页面的UI界面 build() { Column() { TextInput({ placeholder: 请输入用户名 }) TextInput({ placeholder: 请输入密码, type: TextInputType.Password }) // 登录按钮 Button(登录) .onClick(() { // 在这里处理登录逻辑比如验证用户名和密码 // ... }) } }
}
3 State在鸿蒙中扮演着管理组件的状态信息的作用主要作用:
1. 标记状态信息
State装饰器的主要作用是标记一个类或对象的属性为状态信息表示该属性会随着时间的推移而发生变化。这些状态信息通常与组件的UI渲染相关联当状态发生变化时组件的UI也会相应地更新。
2. 自动同步状态
当一个属性被State装饰后该属性的值会被自动同步到应用的状态管理中。这意味着当属性值发生变化时应用的状态也会相应地更新并且这种更新能够触发UI的重新渲染。这种机制有助于开发者在应用的不同组件之间共享状态数据并且能够方便地观察和响应这些状态的变化。
3. 响应式编程
State装饰器是实现响应式编程的关键之一。在鸿蒙开发中响应式编程是一种重要的编程范式它允许开发者以声明式的方式编写代码并通过状态的变化来驱动UI的更新。State装饰器使得开发者可以轻松地定义状态变量并在状态变化时自动触发UI的更新从而简化了UI更新的逻辑。
4. 私有性和初始化
State装饰的变量是私有的只能从组件内部访问。这有助于封装组件的内部状态防止外部代码直接修改状态变量从而保证了组件的封装性和安全性。此外State装饰的变量必须初始化不能为空。这确保了状态变量在使用前已经有一个明确的初始值避免了因未初始化而导致的潜在问题。
5. 支持多种数据类型
State装饰器可以作用到多种数据类型上包括基本数据类型如number、string、boolean等和复杂数据类型如Object、class、array等。这使得开发者可以根据需要灵活地定义状态变量的类型并在状态变化时更新相应的UI元素。
6. 生命周期管理
State装饰的变量生命周期与其所属自定义组件的生命周期相同。当组件被销毁时其内部的状态变量也会被销毁从而避免了内存泄漏等问题。
4 Prop在鸿蒙中主要用于定义组件的属性并确保组件属性与父组件数据源之间的同步关系。主要作用:
1. 定义组件属性
Prop装饰器用于在子组件中定义那些需要从父组件接收的属性。这些属性可以是基本数据类型如string、number、boolean等也可以是枚举类型enum但不支持any类型也不允许使用undefined和null作为初始值。在父组件中通过传递给子组件的构造参数来初始化这些Prop装饰的属性。
2. 单向同步
Prop装饰的变量与父组件之间建立的是单向同步关系。这意味着当父组件中的数据源发生变化时与之相关的Prop装饰的变量会自动更新以保持与父组件数据的一致性。然而子组件中对Prop装饰的变量所做的修改不会同步回父组件。这种单向同步机制有助于维护父子组件之间的数据流向清晰避免数据混乱。
3. 初始化与修改
Prop装饰的变量允许在子组件中进行本地初始化和修改。但是需要注意的是如果父组件中的数据源在子组件本地修改之后发生了变化那么子组件本地对Prop装饰的变量所做的修改将被覆盖。这是因为Prop装饰的变量本质上是父组件数据源的副本它们之间的同步关系是单向的。
4. 变量类型与深拷贝
Prop装饰的变量在父子组件同步过程中会进行深拷贝。这意味着除了基本类型、Map、Set、Date、Array等特定类型外其他类型的数据在拷贝过程中可能会丢失其原有的类型信息。因此在使用Prop装饰器时需要注意数据类型的问题以避免因类型不匹配或丢失而导致的错误。
Component
struct ChildComponent { Prop childCount: number; build() { Text(子组件计数: ${this.childCount}).fontSize(24) }
} Entry
Component
struct ParentComponent { State parentCount: number 0; build() { Column() { Text(父组件计数: ${this.parentCount}).fontSize(24) Button(增加计数) .onClick(() { this.parentCount; }) // 将parentCount传递给子组件的childCount ChildComponent({ childCount: this.parentCount }) } }
}
5 Provide在鸿蒙中主要用于实现跨层级组件间的数据共享和状态同步一般与Consume配合使用主要作用:
1. 数据提供与共享
Provide装饰的变量被视为在组件树中向上提供的状态变量这些变量自动对其所有后代组件可用。这意味着在祖先组件中通过Provide装饰的变量可以被其所有后代组件通过Consume装饰器来访问和绑定从而实现跨层级的数据共享。
2. 跨层级状态同步
不同于State和Link等装饰器Provide和Consume的组合允许在多层级的父子组件之间传递和同步状态。这种机制摆脱了参数传递机制的束缚使得开发者可以更加方便地在复杂的组件树中管理和同步状态。
3. 双向数据同步
虽然Provide本身主要用于数据提供但与其配合使用的Consume装饰器能够实现数据的双向同步。当Provide装饰的变量在祖先组件中被更新时所有绑定了该变量的后代组件也会自动更新其UI反之亦然尽管在实际应用中后代组件通常不会直接修改Provide的变量而是通过事件或其他机制来请求祖先组件更新状态。
4. 变量别名与绑定
Provide装饰器允许开发者为提供的变量指定别名。这样后代组件在通过Consume装饰器绑定变量时可以使用相同的变量名或别名来实现绑定。这种机制增加了灵活性允许开发者在复杂的组件树中更容易地管理和识别状态变量。
5. 初始化与类型要求
Provide装饰的变量必须指定初始值这是确保状态变量在组件树中有效传递的前提。同时Provide和Consume绑定的变量类型必须相同以保证数据的正确性和一致性。Entry
Component
struct CompA { Provide reviewVotes: number 0; build() { // ... }
} Component
struct CompD { Consume reviewVotes: number; build() { // 使用reviewVotes变量来更新UI }
}
6 Observed 和 ObjectLink 装饰器通常一起使用以实现对象属性变化的观察和UI的自动更新。
1. 属性变化观察
Observed装饰的类class会被自动观察其属性的变化。当类中的某个属性被修改时鸿蒙框架能够感知到这种变化并据此进行相应的响应。这种机制使得开发者可以方便地实现响应式编程即根据数据的变化自动更新UI或其他状态。
2. 双向数据同步支持
虽然Observed本身并不直接实现双向数据同步但它与ObjectLink等装饰器配合使用可以支持在父子组件之间进行双向数据同步。在父组件中使用Observed装饰的类实例可以被传递给子组件并通过ObjectLink在子组件中接收从而建立父子组件之间的双向数据绑定关系。
3. 嵌套对象与数组的支持
Observed不仅支持对简单类型属性的观察还支持对嵌套对象或数组等复杂数据结构的观察。这意味着即使数据结构嵌套多层只要使用Observed进行装饰鸿蒙框架都能够感知到其内部属性的变化并作出相应的响应。
4. 改变类原型链
需要注意的是使用Observed装饰类会改变其原始的原型链。这种改变是为了实现属性的观察与响应机制但也可能带来一些潜在的问题。因此在使用Observed时需要谨慎考虑其可能带来的影响并避免与其他类装饰器同时装饰同一个类以免发生冲突。
Observed
class Person { public name: string; public age: number; constructor(name: string, age: number) { this.name name; this.age age; }
}
// ParentComponent.ts
Entry
Component
struct ParentComponent { State person: Person new Person(Alice, 30); build() { // ... 传递person实例给子组件 }
}
// ChildComponent.ts
Component
struct ChildComponent { ObjectLink person: Person; build() { // 使用person实例的属性来更新UI }
}
7 Builder在鸿蒙中提供了一种更轻量的UI元素复用机制。主要作用:
UI元素复用通过Builder装饰的函数开发者可以将重复使用的UI元素抽象成一个方法在build方法里进行调用从而减少代码的冗余提高开发效率。
封装复杂性对于复杂的UI布局使用Builder可以将布局逻辑封装在自定义构建函数中使得build方法更加简洁明了。
支持组件内和全局使用Builder装饰的函数既可以在自定义组件内部定义和使用也可以定义为全局函数供整个应用使用。
Entry
Component
struct MyComponent { build() { Column() { // 调用自定义构建函数 this.myCustomBuilder() } } Builder myCustomBuilder() { Row() { Text(Hello, Builder!) } }
}
8 Extend在ArkUI框架中用于扩展原生组件的样式和行为主要作用:
行为封装除了样式外Extend还可以封装组件的私有属性、私有事件和预定义的方法使得组件的行为更加模块化和可重用。
全局定义Extend装饰的方法需要在全局范围内定义不支持在组件内部定义这有助于保持代码的整洁和一致性。
参数支持Extend装饰的方法支持参数这使得它可以根据不同的需求动态地应用不同的样式或行为。
// 定义扩展样式
Extend(Text)
function fancyText(fontSize: number, fontColor: Color) { .fontSize(fontSize) .fontColor(fontColor) .fontWeight(FontWeight.Bold) .fontStyle(FontStyle.Italic)
}
// 在组件中使用扩展样式
Entry
Component
struct MyComponent { State label: string Hello, Extend!; build() { Column() { // 应用扩展样式 Text(this.label) .fancyText(24, Color.Red) .margin({ top: 10 }) } }
}
9 CustomDialog在ArkUI框架中用于创建自定义对话框,主要作用:
自定义内容CustomDialog允许开发者在对话框中显示任何类型的内容如文本、图像、表单、按钮等从而满足多样化的交互需求。
高度可配置通过CustomDialog装饰的自定义对话框开发者可以自定义对话框的标题、消息、按钮、图标等属性以及对话框的样式和布局。
数据交互自定义对话框还可以作为数据交互的桥梁通过用户输入或选择的信息进行处理并展示需要的信息给用户。
提升用户体验CustomDialog可以帮助开发者在用户操作过程中快速展示信息或选项减少操作繁琐度和时间成本从而提升用户体验。
CustomDialog
struct CustomDialogExample { // 自定义对话框的控制器 controller: CustomDialogController build() { Column() { Text(我是内容) .fontSize(20) .margin({ top: 10, bottom: 10 }) // 添加按钮并绑定点击事件 Flex({ justifyContent: FlexAlign.SpaceAround }) { Button(cancel) .onClick(() { this.controller.close() if (this.cancel) { this.cancel() } }) .backgroundColor(0xffffff) .fontColor(Color.Black) Button(confirm) .onClick(() { this.controller.close() if (this.confirm) { this.confirm() } }) .backgroundColor(0xffffff) .fontColor(Color.Red) } .margin({ bottom: 10 }) } }
}
// 在页面组件中使用自定义对话框
Entry
Component
struct CustomDialogUser { dialogController: CustomDialogController new CustomDialogController({ builder: CustomDialogExample({ // 可以传入回调函数作为cancel和confirm属性的值 cancel: () { console.info(Callback when the cancel button is clicked) }, confirm: () { console.info(Callback when the confirm button is clicked) } }) }) build() { Column() { Button(click me) .onClick(() { this.dialogController.open() }) .width(100%) .margin({ top: 5 }) } }
}
10 Watch在ArkUI框架中主要用于监听状态变量的变化。当被Watch装饰的状态变量发生变化时会自动调用指定的回调函数从而允许开发者执行相应的逻辑处理。主要作用:
状态监听Watch允许开发者监听指定状态变量的值的变化当值发生变化时执行特定的回调函数。
数据响应在组件或页面的开发中Watch用于实现数据的响应式更新。当数据变化时能够自动触发UI的重新渲染保证界面与数据的同步。
性能优化通过细粒度地控制哪些状态变量的变化需要触发UI更新可以避免不必要的渲染从而优化应用的性能。
Component
struct TotalView {Prop Watch(onCountUpdated) count: number;State total: number 0;// Watch 回调onCountUpdated(propName: string): void {this.total this.count;}build() {Text(Total: ${this.total})}
}Entry
Component
struct CountModifier {State count: number 0;build() {Column() {Button(add to basket).onClick(() {this.count})TotalView({ count: this.count })}}
}
