HarmonyOS 鸿蒙Next 使用@prop无法传递PixelMap数据无法加载图片的其他解决方法

HarmonyOS 鸿蒙Next 使用@prop无法传递PixelMap数据无法加载图片的其他解决方法

使用@prop无法传递PixelMap数据,无法加载图片,如果不行有什么其他解决方法吗

2 回复

可以参考下面的demo传递pixelMap:

import { image } from '[@kit](/user/kit).ImageKit';

import { BuilderNode, FrameNode, NodeController } from '[@kit](/user/kit).ArkUI';

[@Observed](/user/Observed)
class Params {
 imagePixelMap: image.PixelMap | undefined;

 constructor(imaagePixelMap: image.PixelMap | undefined) {

   this.imagePixelMap = imaagePixelMap;

 }
}

[@Component](/user/Component)
struct ObjectLinkChild {
 [@ObjectLink](/user/ObjectLink) pixelMapParams: Params;

 build() {

   Column() {

     Text("自定义子組件")

     Image(this.pixelMapParams.imagePixelMap).width(100).height(100)

   }

 }
}

[@Builder](/user/Builder)
function imageBuilder(params: Params) {

 ObjectLinkChild({ pixelMapParams: params })

}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct ImageExample {
 [@State](/user/State) imagePixelMap: image.PixelMap | undefined = undefined;
 [@State](/user/State) pixelMapParams: Params = new Params(this.imagePixelMap);
 wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder<[Params]>(imageBuilder);

 async aboutToAppear() {

   this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.app_icon'))

 }

 build() {

   Column() {

     NodeContainer(new MyNodeController(this.imagePixelMap))

       .width(`100%`)

       .height(`100%`)

   }

 }

 private async getPixmapFromMedia(resource: Resource) {

   let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({

     bundleName: resource.bundleName,

     moduleName: resource.moduleName,

     id: resource.id

   })

   let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))

   let createPixelMap: image.PixelMap =

     await imageSource.createPixelMap({ desiredPixelFormat: image.PixelMapFormat.RGBA_8888 })

   await imageSource.release()

   return createPixelMap

 }
}

class MyNodeController extends NodeController {
 private rootNode: BuilderNode<[Params]> | null = null;
 private pixelMap: image.PixelMap | undefined = undefined;
 private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(imageBuilder);

 constructor(pixelMap: image.PixelMap | undefined) {

   super();

   this.pixelMap = pixelMap;

 }

 setNode(node: BuilderNode<[Params]> | null) {

   this.rootNode = node;

 }

 makeNode(uiContext: UIContext): FrameNode | null {

   if (this.rootNode === null) {

     this.rootNode = new BuilderNode(uiContext);

     this.rootNode.build(this.wrapBuilder, new Params(this.pixelMap));

   }

   return this.rootNode.getFrameNode();

 }
}

更多关于HarmonyOS 鸿蒙Next 使用@prop无法传递PixelMap数据无法加载图片的其他解决方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next中使用@prop无法传递PixelMap数据无法加载图片的问题,以下是一些解决方法:

  1. 检查数据类型和权限

    • 确保@prop装饰的变量和数据源类型相同,且已正确声明必要的权限,如文件系统访问权限。
  2. 使用@Link代替@prop

    • @prop装饰的数据更新依赖所属自定义组件的重新渲染,应用进入后台后无法刷新。可考虑使用@Link进行数据的双向绑定和实时更新。
  3. 检查图片路径和格式

    • 确保图片路径正确无误,且图片格式被系统支持。使用PixelMap加载图片时,需注意GIF图片可能只支持静态显示。
  4. 内存管理

    • 如果图片较大,需考虑内存管理,避免OOM错误。可以尝试使用MediaStore或File API来获取图片的Uri或文件对象,再转换为PixelMap。
  5. 代码检查

    • 检查代码,确保处理图片资源的方式正确无误。检查是否有错误处理机制,如try-catch结构来捕获并处理异常。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部