OpenHarmony應用開發之ETS開發方式中的Image元件詳解

今天帶大家了解ETS開發方式中的Image元件

作者：堅果

公衆号："大前端之旅"

OpenHarmony布道師，InfoQ簽約作者，部落格專家，華為雲享專家，阿裡雲專家部落客，51CTO部落格首席體驗官，開源項目GVA成員之一，專注于大前端技術的分享，包括Flutter,鴻蒙，小程式,安卓，VUE，JavaScript。

Image

圖檔元件，支援本地圖檔和網絡圖檔的渲染展示。

我們可以看一下他的接口都有哪些内容

(src: string | PixelMap | Resource): ImageAttribute;

src:string|PixelMap 圖檔的URI，支援本地圖檔和網絡路徑，支援使用媒體PixelMap對象。

PixelMap:圖像像素類，用于讀取或寫入圖像資料以及擷取圖像資訊。在調用PixelMap的方法前，需要先通過createPixelMap建立一個PixelMap執行個體。這裡我隻說前面的一個參數。

引用App本地圖檔

這裡先示範如何通過接口引用App本地圖檔。圖檔格式支援“png/jpg/gif/svg”，圖檔檔案可以存放在media媒體目錄、或自己建立的“/common/images”目錄

我在項目裡放了兩張鴻蒙相關的圖檔，都是不同的，便于區分，接下來，我們就在項目裡使用他們。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text("media目錄下的媒體資源").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%")
          .aspectRatio(1.5)
        Text("/common/images目錄下的圖檔").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("/common/images/HarmonyOS.jpg") // /common/images目錄下的圖檔
          .width("100%")
          .aspectRatio(1.5)
      }
      .width('100%')
    }
    .height('100%')
  }
}

我們點選右側的預覽，來看一下

以上就是本地圖檔的簡單使用，接下來我們對網絡圖檔進行同樣的操作，

引用網絡圖檔時記得添權重限

引用網絡圖檔時記得添權重限。方法：需要在config.json（FA模型）或者module.json5（Stage模型）對應的"abilities"中添加網絡使用權限ohos.permission.INTERNET。

"abilities": [
  {
    ...
    "permissions": ["ohos.permission.INTERNET"],
    ...
  }
]

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text("media目錄下的媒體資源").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%")
          .aspectRatio(2.6)
        Text("/common/images目錄下的圖檔").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("/common/images/HarmonyOS.jpg") // /common/images目錄下的圖檔
          .width("100%")
          .aspectRatio(2.6)
        Text("網絡圖檔，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目錄下的圖檔
          .width("100%")
          .aspectRatio(2.6)
      }
      .width('100%')
    }
    .height('100%')
  }
}

接下來我們繼續接着對通用屬性之外的其他特有屬性來進行學習

首先來個預覽：

接下來，我将對其中的屬性一一了解

.alt(string | PixelMap)：

加載時顯示的占位圖。支援本地圖檔和網絡路徑，支援使用媒體PixelMap對象。

示例代碼：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
//        Text("media目錄下的媒體資源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%")

//        Text("/common/images目錄下的圖檔").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目錄下的圖檔
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("網絡圖檔，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目錄下的圖檔
//          .width("100%")
//          .aspectRatio(2.6)
        Text("alt屬性").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%")
          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg")
      }
      .width('100%')
    }
    .height('100%')
  }
}

大家可以看到的就是/common/images/HarmonyOS.jpg為加載時顯示的占位圖

. objectFit (ImageFit)：設定圖檔的縮放類型。

/**
           * .objectFit(ImageFit) 設定圖檔的縮放類型，預設值Cover。
           *    ImageFit.Cover 保持寬高比進行縮小或者放大，使得圖檔兩邊都大于或等于顯示邊界。
           *    ImageFit.Contain 保持寬高比進行縮小或者放大，使得圖檔完全顯示在顯示邊界内。
           *    ImageFit.Fill 不保持寬高比進行放大縮小，使得圖檔填充滿顯示邊界。
           *    ImageFit.None 保持原有尺寸顯示。通常配合objectRepeat屬性一起使用。
           *    ImageFit.ScaleDown 保持寬高比顯示，圖檔縮小或者保持不變。
           */

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
//        Text("media目錄下的媒體資源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%")

//        Text("/common/images目錄下的圖檔").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目錄下的圖檔
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("網絡圖檔，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目錄下的圖檔
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("alt屬性").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%")
//          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg").objectFit(ImageFit.Cover)
        Text("ImageFit.Cover").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6)
         .objectFit(ImageFit.Cover)
        Text("ImageFit.Contain").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.Contain)
        Text("ImageFit.ScaleDown").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.ScaleDown)
        Text("ImageFit.Fill").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.Fill)
      }
      .width('100%')


    }
    .height('100%')
  }
}

. objectRepeat (ImageRepeat): 設定圖檔的重複樣式。

ImageRepeat枚舉說明

名稱	描述
X	隻在水準軸上重複繪制圖檔。
Y	隻在豎直軸上重複繪制圖檔。
XY	在兩個軸上重複繪制圖檔。
NoRepeat	不重複繪制圖檔。

. interpolation (ImageInterpolation)：設定圖檔的插值效果，僅針對圖檔放大插值。

對于一些較小的圖檔，或老照片，插值計算有助于提升畫質。下面是它的一些參數

ImageInterpolation

名稱	描述
None	不使用插值圖檔資料。
High	插值圖檔資料的使用率高，可能會影響圖檔渲染的速度。
Medium	插值圖檔資料的使用率中。
Low	插值圖檔資料的使用率低。

. renderMode (ImageRenderMode)：設定圖檔渲染的模式。相當于PS中對圖檔做去色處理，可将彩色圖檔變為灰階圖檔。

ImageRenderMode

名稱	描述
Original	按照原圖進行渲染，包括顔色。
Template	将圖檔渲染為模闆圖檔，忽略圖檔的顔色資訊

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
//        Text("media目錄下的媒體資源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%")

//        Text("/common/images目錄下的圖檔").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目錄下的圖檔
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("網絡圖檔，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目錄下的圖檔
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("alt屬性").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%")
//          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg").objectFit(ImageFit.Cover)
//        Text("ImageFit.Cover").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%").aspectRatio(2.6)
//         .objectFit(ImageFit.Cover)
//        Text("ImageFit.Contain").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.Contain)
//        Text("ImageFit.ScaleDown").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.ScaleDown)
//        Text("ImageFit.Fill").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.Fill)
        Text("ImageRenderMode.Original").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6)
          .renderMode(ImageRenderMode.Original) // 按照原圖進行渲染，包括顔色
        Text("ImageRenderMode.Template").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6)
          .renderMode(ImageRenderMode.Template) // 按照原圖進行渲染，包括顔色
      }
      .width('100%')


    }
    .height('100%')
  }
}

.sourceSize({width: number,height: number})：設定圖檔解碼尺寸，将原始圖檔解碼成指定尺寸的圖檔，number類型機關為px。

一張原本尺寸為1140x570像素的圖檔，指定解碼尺寸為120x100像素的照片後，如果圖檔展示尺寸超過該尺寸，就會模糊，示例代碼如下：

Text("原圖").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6)

        Text("解碼為小尺寸後顯示模糊").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6).sourceSize({
          width: 120,
          height: 100
        }) // 解碼為小尺寸後顯示模糊

當然，除過這些，還有其他的一些屬性

事件屬性

1.onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)：圖檔成功加載時觸發該回調，傳回成功加載的圖源尺寸。

width：圖檔的寬，機關為像素。
height：圖檔的高，機關為像素。
componentWidth：元件的寬，機關為像素。
componentHeight：元件的高，機關為像素。
loadingStatus：圖檔加載成功的狀态。

2.onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)：圖檔加載出現異常時觸發該回調。

Text("原圖").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目錄下的媒體資源
          .width("100%").aspectRatio(2.6).onComplete((msg: { width: number,height: number,componentWidth: number,
 componentHeight: number, loadingStatus: number }) => {

          console.log(msg.width.toString());
        })
          .onError(() => {
            console.log('加載圖檔失敗')
          })
          .onFinish(() => {
            //當加載的源檔案為帶動效的svg圖檔時，當svg動效播放完成時會觸發這個回調，如果動效為無限循環動效，則不會觸發這個回調。
          })

OpenHarmony應用開發之ETS開發方式中的Image元件詳解

Image

引用App本地圖檔

引用網絡圖檔時記得添權重限

ImageRepeat枚舉說明

ImageInterpolation

ImageRenderMode

事件屬性

總結

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯