0
点赞
收藏
分享

微信扫一扫

OpenHarmony组件之Image

Image定义介绍

interface ImageInterface {
(src: string

  • 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')
},
}

举报

相关推荐

0 条评论