【HarmonyOS】鸿蒙开发之Image组件——第3.1章

图片的放缩类型

1. Cover（默认值）：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界外。

 Image("https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg")
                 .width(100)
                 .margin({right:10})
                 .objectFit(ImageFit.Cover)

运行结果:

1. Contain：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界内

Image("https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg")
                 .width(100)
                 .margin({right:10})
                 .objectFit(ImageFit.Contain)

运行结果:

1. Fill：不保持图片宽高比显示，是图片完全充满显示边界。

Image("https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg")
                 .width(100)
                 .margin({right:10})
                 .objectFit(ImageFit.Fill)

运行结果:

1. None：保持图片原有尺寸显示，通常配合 objectRepeat 属性一起使用。

 Image("https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg")
                 .width(100)
                 .margin({right:10})
                 .objectFit(ImageFit.None)

运行结果:

1. ScaleDown：保持图片宽高比显示，使图片缩小或者保持不变的显示出来。

 Image("https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg")
                 .width(100)
                 .margin({right:10})
                 .objectFit(ImageFit.ScaleDown)

运行结果:

图片加载方式

1. 网络加载

Image("https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg")
             .width(100)
             .margin({right:10})

1. 本地加载

# $r("app.media.home")表示加载app/media/home图片
 Image($r("app.media.home"))
               .width(100)
               .margin({bottom:10})

Image缓存设置

arkUI开发框架在 @system.app 模块内提供了图片的全局缓存策略，全局缓存策略使用了 LRU 算法

import app from '@system.app';

  onCreate() {
     console.info('Application onCreate')
    app.setImageRawDataCacheSize(100) // 100 设置内存中缓存解码后图片的数量上限，单位为 number。
    app.setImageCacheCount(100 * 1024 * 1024) // 设置解码前图片数据内存缓存上限为100MB。设置内存中缓存解码前图片数据的大小上限，单位为字节。
    app.setImageFileCacheSize(100 * 1024 * 1024) // 设置图片文件缓存的大小上限，单位为字节
  }
  onDestroy() {
     console.info('Application onDestroy')
  }
//把以上注释内容编写进入src/main/ets/entryability/EntryAbility.ts文件，用于image缓存设置

注意:当加载网络图片时需要申请 ohos.permission.INTERNET 权限。
案例:

 Image("https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg")
                 .width(100)
                 .margin({right:10})

开启权限文件:src/main/resources/module.json5