OpenHarmony组件之Image

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天， 点击查看活动详情

Image定义介绍

interface ImageInterface {
  (src: string | PixelMap | Resource): ImageAttribute;
}

• src：设置要加载的图片资源，支持从本地、网络和内存中加载图片，简单样例如下

Image属性介绍

declare class ImageAttribute extends CommonMethod<ImageAttribute> {
  alt(value: string | Resource): ImageAttribute;
  matchTextDirection(value: boolean): ImageAttribute;
  fitOriginalSize(value: boolean): ImageAttribute;
  fillColor(value: ResourceColor): ImageAttribute;
  objectFit(value: ImageFit): ImageAttribute;
  objectRepeat(value: ImageRepeat): ImageAttribute;
  autoResize(value: boolean): ImageAttribute;
  renderMode(value: ImageRenderMode): ImageAttribute;
  interpolation(value: ImageInterpolation): ImageAttribute;
  sourceSize(value: { width: number; height: number }): ImageAttribute;
  syncLoad(value: boolean): ImageAttribute;
  onComplete(
    callback: (event?: {
      width: number;
      height: number;
      componentWidth: number;
      componentHeight: number;
      loadingStatus: number;
    }) => void,
  ): ImageAttribute;
  onError(callback: (event?: { componentWidth: number; componentHeight: number }) => void): ImageAttribute;
  onFinish(event: () => void): ImageAttribute;
}

• alt：设置占位图，图片显示之前先显示占位图，比如在加载网络图片或者图片加载失败时的场景。

• objectFit：设置图片的放缩类型，当 Image 组件大小和图片大小不同时指定图片的放缩类型， ImageFit 提供了以下5种匹配模式：

  • Cover（默认值） ：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界外。
  • Contain：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界内。
  • Fill：不保持图片宽高比显示，是图片完全充满显示边界。
  • None：保持图片原有尺寸显示，通常配合 objectRepeat 属性一起使用。
  • ScaleDown：保持图片宽高比显示，使图片缩小或者保持不变的显示出来。

Image缓存设置

Image 组件没有提供图片缓存相关的 api ，ArkUI开发框架在 @system.app 模块内提供了图片的全局缓存策略，全局缓存策略使用了 LRU 算法：

• setImageCacheCount：设置内存中缓存解码后图片的数量上限，单位为 number。

• setImageRawDataCacheSize：设置内存中缓存解码前图片数据的大小上限，单位为字节。

• setImageFileCacheSize：设置图片文件缓存的大小上限，单位为字节。

  在APP启动的时候，设置全局缓存策略，用法如下：

  import app from '@system.app';
  
  export default {
    onCreate() {
      console.info('Application onCreate')
      app.setImageRawDataCacheSize(100 * 1024 * 1024) // 设置解码前图片数据内存缓存上限为100MB
    },
    onDestroy() {
      console.info('Application onDestroy')
    },
  }