【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
2
3
4

运行结果:

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

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

运行结果:

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

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

运行结果:

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

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

运行结果:

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

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

运行结果:

图片加载方式

1. 网络加载

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

2. 本地加载

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

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缓存设置
1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

✨$踩坑不易，还希望各位大佬支持一下$

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/269599