【HarmonyOS Next】鸿蒙实用装饰器一览(一)

最新推荐文章于 2025-04-10 11:37:55 发布
原创 最新推荐文章于 2025-04-10 11:37:55 发布 · 1.5k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #ArkTs #前端

  装饰器是现代js一个很重要(尚未成熟)的特性，TS4.9开始对装饰器的Stage 3支持，并在TS5.0中发布了装饰器规范的完整版本。ArkTS在TS生态基础上做了进一步扩展，保持了TS的基本风格，同时封装了大量的装饰器来简化功能。

以下内容基于HarmonyOS Next 5.0.0(API12)。

UI组件装饰器

详细文档参考
HarmonyOS Developer文档 - 创建自定义组件

@Component装饰器

@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力。

@Entry装饰器

@Entry装饰的自定义组件将作为UI页面入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。

@Reusable装饰器

@Reusable装饰的自定义组件具备可复用能力。官方文档未详细说明，事实上这个装饰器在解决帧率瓶颈时非常重要且有效。

使用场景
  • 滑动场景下对同一类自定义组件的实例进行频繁的创建与销毁。
  • 反复切换条件渲染的控制分支，且控制分支中的组件子树结构比较复杂。

可复用自定义组件的缓存和复用只能发生在同一父组件下，无法在不同的父组件下复用同一自定义组件的实例。

组件状态管理装饰器

@State装饰器

@State装饰的变量，与声明式范式中的其他被装饰变量一样，是私有的，只能从组件内部访问，在声明时必须指定其类型和本地初始化。

初始化也可选择使用命名参数机制从父组件完成初始化。这一点受到争议，大部分人认为私有的变量不应该从父组件进行初始化，所以在@ComponentV2中，新增@Local进行平替。

详细文档参考
HarmonyOS Developer文档 - @State装饰器：组件内状态

@Prop装饰器

@Prop装饰的变量和父组件建立单向的同步关系。当父组件的变量发生变化时会同步到子组件，所以@Prop装饰器自然不能使用在被@Entry装饰的UI页面上；另外@Prop装饰的变量允许组件内部进行修改，个人认为这个特性是松散且不严谨的。

详细文档参考
HarmonyOS Developer文档 - @State装饰器：组件内状态

@Link装饰器

被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。同@Prop装饰器一样也只能作用在子组件上。

详细文档参考
HarmonyOS Developer文档 - @Link装饰器：父子双向同步

@Provide装饰器和@Consume装饰器

@Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的@Link装饰器，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。

详细文档参考
HarmonyOS Developer文档 - @Provide装饰器和@Consume装饰器：与后代组件双向同步

@Observed装饰器和@ObjectLink装饰器

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步，被@ObjectLink修饰的状态变量用于接收被@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。

详细文档参考
HarmonyOS Developer文档 - @Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

应用状态管理装饰器

@LocalStorageProp装饰器

@LocalStorageProp装饰的变量与LocalStorage中给定属性建立单向同步关系。

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。

详细文档参考
HarmonyOS Developer文档 - @LocalStorageProp

@LocalStorageLink装饰器

@LocalStorageLink(key)是和LocalStorage中key对应的属性建立双向数据同步关系。

详细文档参考
HarmonyOS Developer文档 - @LocalStorageLink

@StorageProp装饰器

@StorageProp(key)是和AppStorage中key对应的属性建立单向数据同步关系。

AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。

详细文档参考
HarmonyOS Developer文档 - @StorageProp

@StorageLink装饰器

@StorageLink(key)是和AppStorage中key对应的属性建立双向数据同步关系。

详细文档参考
HarmonyOS Developer文档 - @StorageLink

其他状态管理装饰器

@Watch装饰器

@Watch用于监听状态变量的变化，当状态变量变化时，@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等(===)，遵循严格相等规范。

详细文档参考
HarmonyOS Developer文档 - @Watch装饰器：状态变量更改通知

@Track装饰器

@Track应用于class对象的属性级更新。@Track装饰的属性变化时，只会触发该属性关联的UI更新。而未被标记的属性不能在UI中使用，如果使用，会发生运行时报错。

详细文档参考
HarmonyOS Developer文档 - @Track装饰器：class对象属性级更新

鸿蒙之光HarmonyOS NEXT原生应用开发入门指南【文末好书推荐】
一键难忘的博客
02-03 6175
HarmonyOS 是华为推出的一个跨平台操作系统，致力于为不同设备提供统一的操作体验。HarmonyOS NEXT 是鸿蒙操作系统的一个重要版本，具有原生应用开发的优势，可以帮助开发者更好地利用鸿蒙生态的潜力。本文将带领大家了解如何开始进行 HarmonyOS NEXT 原生应用的开发。
鸿蒙Next-方法装饰器以及防抖方法注解实现
Android技术之家
02-24 646
以下是关于鸿蒙Next（HarmonyOS NEXT）中MethodDecorator的详细介绍及使用指南，结合了多个技术来源的实践总结：一、MethodDecorator 的概念与作用MethodDecorator是鸿蒙Next框架中用于装饰类方法的装饰器，属于ArkUI 装饰器体系的一部分。它允许开发者为类方法动态添加元数据或功能扩展，例如实现方法拦截、状态监听、日志记录等场景。通...
鸿蒙系列--装饰器
weixin_42277946的博客
01-03 3475
鸿蒙系列--装饰器
鸿蒙Harmony应用开发—ArkTS-@Provide装饰器和@Consume装饰器：与后代组件双向同步
m0_64420071的博客
03-22 1908
@Provide装饰器和@Consume装饰器：与后代组件双向同步
鸿蒙开发笔记(四):自定义组件常用装饰器 @Builder @BuilderParam @Styles @Extend及stateStyles
Waruler的博客
01-16 4544
鸿蒙开发中自定义组件中常用的装饰器: @Builder @BuilderParam @Styles @Extend 及stateStyles
[干货][HarmonyOS NEXT]鸿蒙中除了这些还有哪些装饰器呢？
weixin_43331077的博客
06-08 841
LocalStorageLink/@LocalStorageProp：针对页面级别的 UI 状态存储，方便页面间数据共享和更新。@ObjectLink：配合 Observed 修饰的类，实现子组件对局部组件的更新，且不能用于 Entry 修饰的组件。@Provide/@Consume：跨组件传值，通过提供方和消费方的标记来共享和更新数据。@Track：标记对象中可更新和使用的字段，只有被标记的字段才有效。@Extend：用于扩展组件的样式或行为，可抽离公共的样式。@Styles：定义组件的样式集合。
HarmonyOS鸿蒙学习笔记（28）@entry和@Component的生命周期
菜鸟博客
05-31 5911
@entry和@Component的生命周期
精选资源
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP
12-19
在这样的背景下，华为推出了自主研发的HarmonyOS NEXT 5.0操作系统，旨在为用户提供一个全新的智能生态系统。为了进一步丰富HarmonyOS应用生态，开发者和设计师们纷纷投身于各类应用程序的开发，其中就包括了针对...
精选资源
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
### 全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战教程解析 #### 一、鸿蒙开发环境准备与工具下载 本教程旨在帮助初学者从零开始学习鸿蒙 HarmonyOS NEXT 星河版的开发技术。首先，我们需要准备开发环境。...
精选资源
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
鸿蒙Harmony--状态管理器--@Provide装饰器和@Consume装饰器详解
袁震的博客
01-11 2116
今天是1月11日号星期四，农历腊月初一，辞旧的岁月里，愿你守得云开、终见月明，迎新的时光中，愿你心御寒冬、顺遂无忧，岁末冬深，希望接下来的日子里足够幸运，攒足勇气、信心和运气，去迎接新的一年，去遇见更好的自己！
鸿蒙（HarmonyOS）-- 装饰器（UI装饰器）
怕啥来啥的博客
04-10 2241
Extend装饰器可以将多条样式设置成一个方法，直接在组件声明位置调用。通过@Extend装饰器可以快速定义并复用自定义样式。@Extend只能支持在全局定义在使用@Extend装饰器时，需要指定一个你将要扩展的组件@Extend装饰器只支持指定组件所能使用的属性和事件如：你指定的组件是Text，那么只能添加Text可以使用的属性和事件如：你指定的组件是Button，那么只能添加Button可以使用的属性和事件@Extend装饰器不支持导出使用，不支持export@Extend装饰器。
鸿蒙入门06-常见装饰器( 简单装饰器 )
qq_42660453的博客
04-18 3801
通过 Button() 组件的点击事件修改了 @State 定义的 count 变量。这里使用 Text() 组件展示了 @State 定义的 count 变量。因为变量的修改导致了 UI 界面的重新绘制。his 指代当前所属组件。所以页面跟随出现变化。当你调用子组件的时候。
鸿蒙中的装饰器及其功能简介
Ronin_zzb的博客
06-04 1843
装饰器用于状态变量的监听。如果需要关注某个状态变量的值是否改变，可以使用@Watch（使用方法大概如下，还可以监听@Prop、@Link和@Provide等）Tips：在实际生产中，我们可自定义组件，只复用此组件的逻辑（例如检测当前设备类型、当前设备状态等），外部UI使用BuilderParam传入。时，执行的并发函数若需要传输类对象且使用该类的内部方法，该类需要使用此装饰器修饰，否则无法使用此对象内的方法。限制条件：不能在UI中使用非@Track装饰的属性，包括不能绑定在组件上、不能用于初始化子组件。
鸿蒙 状态管理-组件装饰器
ganshenml的专栏
02-20 1198
因为它们类似于Android中的ContentProvider与ContentResolver。一个是提供者，一个是消费者。
【HarmonyOS】鸿蒙开发中所使用的装饰器
m0_61170978的博客
04-15 2603
/ 定义语法// 使用方法this// 定义语法 @Builder MyBuilderFunction() {. . . } // 使用方法 this . MyBuilderFunction()只能在组件内部使用该自定义构建函数；自定义构建函数写法和build()相同，this指向当前组件，可以直接使用组件的状态变量，不需要通过状态传递；// 定义语法// 使用方法全局定义的构建函数可以被整个应用获取，不允许使用this和bind方法；
鸿蒙HarmonyOS应用开发-装饰器总结
weixin_48952056的博客
05-18 1456
在鸿蒙应用开发中常用的状态管理技术，包括 @Prop、@Link、@Provide、@Observed 和 @ObjectLink 装饰器。通过介绍每种装饰器的特点、限制条件和常见问题，读者可以更好地了解如何有效地管理应用的状态数据，提升应用的可维护性和稳定性。
鸿蒙4.0开发笔记之ArkTS装饰器语法基础之发布者订阅者模式@Provide和@Consume（十三）
Viewinfinitely的博客
12-04 1299
在鸿蒙系统的官方语言ArkTS中，有一套类似于发布者和订阅的模式，使用@Provide、@Consume两个装饰器来实现。@Provide、@Consume：@Provide/@Consume装饰的变量用于跨组件层级（多层组件）同步状态变量，可以不需要通过参数命名机制传递，通过alias（别名）或者属性名绑定。
HarmonyOS next 鸿蒙开发 image 显示jpg数据
最新发布
08-13
<think>我们正在讨论HarmonyOS NEXT中显示JPG图片的问题。根据用户的问题，他想要在鸿蒙开发中显示JPG图片数据。我们可以参考提供的引用资料，特别是引用[4]中的代码示例，该示例展示了如何从资源中获取JPG图片并显示。 在HarmonyOS NEXT中，显示图片通常使用`<Image>`组件。同时，我们需要通过资源管理获取图片数据，然后创建ImageSource，进而生成PixelMap，最后将PixelMap设置给Image组件。 根据引用[4]的示例，我们可以分解为以下步骤： 1. 获取资源管理器（resourceManager）并读取图片文件（如test.jpg）的原始数据。 2. 将原始数据转换为ArrayBuffer，然后创建ImageSource。 3. 通过ImageSource创建PixelMap（位图数据）。 4. 将PixelMap设置给Image组件进行显示。 但是，需要注意的是，引用[4]中的代码仅展示了如何从资源文件中获取图片并创建PixelMap，并没有直接展示如何显示在Image组件上。因此，我们需要结合ArkUI的Image组件来显示。 在ArkUI中，Image组件可以通过设置`src`属性来显示图片，而`src`属性可以接受资源路径、PixelMap等。 因此，我们可以这样实现： 步骤1：将图片文件（如test.jpg）放在resources/base/media目录下（如果没有media目录，可以创建）。 步骤2：在UI中使用Image组件，并设置其src属性为资源路径（$r('app.media.test')）即可直接显示。 但是，如果用户希望从二进制数据（比如通过网络下载的JPG数据）显示，那么就需要使用引用[4]中的方法，将二进制数据转换为PixelMap，然后设置给Image组件。 因此，我们分两种情况： 情况一：图片是本地资源文件（放在resources目录下） 情况二：图片是二进制数据（比如从网络下载或内存中） 用户的问题中提到了“显示JPG图片数据”，这里的数据可能是二进制数据，所以我们重点放在情况二。 以下是如何在ArkUI（使用TypeScript）中显示二进制JPG图片数据的步骤： 1. 获取二进制数据（Uint8Array格式）。 2. 使用`image.createImageSource`创建ImageSource。 3. 通过ImageSource创建PixelMap。 4. 将PixelMap设置给Image组件的src属性。 示例代码（基于ArkTS）： 假设我们有一个包含JPG图片二进制数据的Uint8Array（例如从网络下载或读取文件得到），我们可以这样显示： ```typescript import image from '@ohos.multimedia.image'; import resourceManager from '@ohos.resourceManager'; @Entry @Component struct ImageDisplayExample { // 用于存储PixelMap @State pixelMap: image.PixelMap | undefined = undefined; aboutToAppear() { // 假设我们有一个Uint8Array类型的jpg数据，这里用空数组代替，实际应从网络或文件读取 // 这里我们模拟一个从资源文件读取的过程，实际中可能从网络获取 const context = getContext(this); resourceManager.getResourceManager().then(resMgr => { resMgr.getRawFileContent('test.jpg').then(fileData => { console.log("Succeeded in getting RawFileContent"); // 获取ArrayBuffer const buffer = fileData.buffer.slice(0); // 创建ImageSource const imageSource = image.createImageSource(buffer); // 创建PixelMap imageSource.createPixelMap().then(pixelMap => { this.pixelMap = pixelMap; }).catch(err => { console.error("Failed to create PixelMap: " + JSON.stringify(err)); }); }).catch(err => { console.error("Failed to get RawFileContent: " + JSON.stringify(err)); }); }).catch(err => { console.error("Failed to get resourceManager: " + JSON.stringify(err)); }); } build() { Column() { // 使用Image组件显示 if (this.pixelMap) { Image(this.pixelMap) .width(200) .height(200) } else { Text('Loading...') } } .width('100%') .height('100%') } } ``` 注意：上述代码中，我们使用了`resourceManager`来读取resources/rawfile目录下的test.jpg文件（注意：getRawFileContent读取的是rawfile目录下的文件，所以需要将test.jpg放在resources/rawfile目录下）。如果我们的二进制数据来自其他途径（如网络），则不需要使用resourceManager，直接使用获取到的Uint8Array即可。 例如，如果我们从网络获取到二进制数据（ArrayBuffer），可以这样： ```typescript // 假设response是网络请求返回的ArrayBuffer const buffer = response; // response是ArrayBuffer类型 const imageSource = image.createImageSource(buffer); imageSource.createPixelMap().then(pixelMap => { this.pixelMap = pixelMap; }); ``` 另外，需要注意的是，HarmonyOS NEXT的Image组件可以直接显示网络图片，通过设置src为网络URL，但这里用户要求显示JPG图片数据（二进制数据），所以我们需要转换为PixelMap。 总结： 在HarmonyOS NEXT中显示JPG图片数据（二进制数据）的关键步骤是： 1. 将二进制数据（Uint8Array或ArrayBuffer）转换为ImageSource。 2. 通过ImageSource创建PixelMap。 3. 将PixelMap设置为Image组件的src。 这样，就可以在应用界面上显示JPG图片了。 参考文献： [^4] 提供了创建ImageSource和PixelMap的代码示例。 根据用户的问题，我们提供了上述解决方案。如果用户有其他疑问，可以进一步探讨。 相关问题： 1. 在HarmonyOS NEXT中如何显示网络图片（直接通过URL）？ 2. 如何处理图片加载失败的情况？ 3. 如何对图片进行缩放、裁剪等操作？</think>在 HarmonyOS NEXT 中显示 JPG 图片数据主要通过 `Image` 组件和图像处理 API 实现，以下是详细步骤和代码示例： ### 核心步骤 1. **获取图片数据** 从资源文件、网络或内存中获取 JPG 二进制数据（`Uint8Array` 格式） 2. **创建 ImageSource 对象** 使用 `@ohos.multimedia.image` 模块将二进制数据转换为图像源： ```typescript import image from '@ohos.multimedia.image'; // 假设 jpgData 是 Uint8Array 类型的 JPG 数据 const imageSource = image.createImageSource(jpgData.buffer); ``` 3. **生成 PixelMap 位图** 从 ImageSource 解码生成可显示的位图对象： ```typescript imageSource.createPixelMap().then((pixelMap: image.PixelMap) => { // 此处获取到可渲染的位图 }).catch((error: BusinessError) => { console.error("解码失败: " + error.message); }); ``` 4. **通过 Image 组件显示** 在 ArkUI 中将 PixelMap 绑定到 Image 组件： ```typescript @State pixelMap: image.PixelMap | null = null; build() { Column() { if (this.pixelMap) { Image(this.pixelMap) // 直接使用 PixelMap .width(200) .height(200) .objectFit(ImageFit.Contain) } else { Text('图片加载中...') } } } ``` ### 完整示例代码 ```typescript import image from '@ohos.multimedia.image'; import { BusinessError } from '@ohos.base'; @Entry @Component struct ImageDisplayExample { @State pixelMap: image.PixelMap | null = null; aboutToAppear() { // 1. 获取JPG数据（示例从资源读取） const context: Context = getContext(this); context.resourceManager.getRawFileContent('test.jpg') .then((fileData: Uint8Array) => { console.log("获取JPG数据成功"); // 2. 创建ImageSource const buffer = fileData.buffer.slice(0); const imageSource: image.ImageSource = image.createImageSource(buffer); // 3. 生成PixelMap imageSource.createPixelMap() .then((pixelMap: image.PixelMap) => { this.pixelMap = pixelMap; }) }).catch((error: BusinessError) => { console.error("处理失败: " + error.message); }); } build() { Column() { if (this.pixelMap) { // 4. 显示图片 Image(this.pixelMap) .width('90%') .height(300) .borderRadius(10) .overlay('JPG图片', { align: Alignment.Bottom, offset: { y: 10 } }) } else { ProgressBar() .width(100) .height(100) .color(Color.Blue) Text('解码图片中...').margin(10) } } .width('100%') .height('100%') .padding(20) } } ``` ### 关键注意事项 1. **资源放置** JPG 文件需放在项目的 `resources/rawfile` 目录下（如 `test.jpg`） 2. **权限声明** 如果加载网络图片，需在 `module.json5` 中添加网络权限： ```json "requestPermissions": [ { "name": "ohos.permission.INTERNET" } ] ``` 3. **内存管理** 使用后释放资源避免内存泄漏： ```typescript // 组件销毁时 aboutToDisappear() { if (this.pixelMap) { this.pixelMap.release(); } } ``` 4. **性能优化** 大图片建议先获取尺寸再按需解码： ```typescript imageSource.getImageInfo().then((info: image.ImageInfo) => { console.log(`图片尺寸: ${info.size.width}x${info.size.height}`); }); ``` ### 替代方案（直接显示资源文件） 如果只需显示本地资源文件，可直接使用资源路径： ```typescript Image($r('app.media.test_jpg')) // 放在resources/base/media目录 .width(200) .height(200) ``` > 提示：鸿蒙的 `Image` 组件原生支持 JPG/PNG/WEBP 等常见格式[^4]，解码过程会自动处理色彩空间转换和 EXIF 方向信息。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值