鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Image图片组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Image图片组件

一、操作环境

操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Image组件

Image 用来加载并显示图片的基础组件,它支持从内存、本地和网络加载图片,当从网络加载图片的时候,需要申请网络访问权限。ohos.permission.INTERNET

接口

Image(src: string | PixelMap | Resource)

参数

参数名

参数类型

必填

默认值

参数描述

src

string| PixelMap| Resource

-

图片的数据源,支持本地图片和网络图片。

当使用相对路径引用图片资源时,例如Image("common/test.jpg"),不支持该Image组件被跨包/跨模块调用,建议使用$r方式来管理需全局使用的图片资源。

- 支持的图片格式包括png、jpg、bmp、svg和gif。

- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。

- 支持dataability://路径前缀的字符串,用于访问通过data ability提供的图片路径。

属性

名称

参数类型

默认值

描述

alt

string | Resource

-

加载时显示的占位图。仅支持本地图片。

objectFit

ImageFit

Cover

设置图片的缩放类型。

objectRepeat

ImageRepeat

NoRepeat

设置图片的重复样式。

说明:

- svg类型图源不支持该属性。

interpolation

ImageInterpolation

None

设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。

说明:

- svg类型图源不支持该属性。

- PixelMap资源不支持该属性。

renderMode

ImageRenderMode

Original

设置图片渲染的模式。

说明:

- svg类型图源不支持该属性。

sourceSize

{

width: number,

height: number

}

-

设置图片解码尺寸,将原始图片解码成指定尺寸的图片,number类型单位为px。

说明:

- PixelMap资源和SVG图片不支持该属性。

matchTextDirection

boolean

false

设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。

fitOriginalSize

boolean

true

图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。

fillColor

ResourceColor

-

仅对svg图源生效,设置后会替换svg图片的fill颜色。

autoResize

boolean

true

是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。

syncLoad8+

boolean

false

设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。

事件
  • onComplete:图片成功加载时触发该回调,返回图片原始尺寸信息。
  • onError:图片加载出现异常时触发该回调。
  • onFinish:当加载的源文件为带动效的 svg 图片时,当 svg 动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。

三、示例

代码
// @ts-nocheck
@Entry
@Component
struct Index {
  // @ts-ignore
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Image($r("app.media.icon")) //本机加载(就是本地的App图标)
          .width(180)
          .height(180)
          .renderMode(ImageRenderMode.Original) //  原图渲染
          .onClick(() => { //  通用事件
            if (this.src == this.on || this.src == this.off2on) {
              this.src = this.on2off
            } else {
              this.src = this.off2on
            }
          })
          .onComplete((msg: { width: number,height: number }) => {
            console.log(msg.width)
            console.log(msg.height)
          })
          .onFinish(() => {
          if (this.src == this.off2on) {
            this.src = this.on
          } else {
            this.src = this.off
          }
        })
        Image('https://img.sample.com/imgs/test.png') //加载网络图片
          .width(180)
          .height(80)
          .onError(() => {
            console.error('load image fail') //image加载会失败 没申请权限
          })
        // @ts-ignore
        Image(this.pixelMap) // pixelMap为内存图片
          .width(180)
          .height(80)
      }
      .width('100%')
    }
    .height('100%')
  }
}

好了就写到这吧!

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,
大军纵横驰奔,

谁敢横刀立马?
惟有点赞加关注大军。

你可能感兴趣的:(harmonyos,华为)