學習筆記（十六）：ArkUi-顯示圖片 (Image)

听着music睡發表於2024-10-31
筆記UI

概述：

Image支援多種圖片格式，包括png、jpg、bmp、svg、gif和heif

可支援顯示本地圖片，網路圖片,Resource資源、媒體庫資源和base64

一、建立Image

Image(src: PixelMap | ResourceStr | DrawableDescriptor)

1、顯示本地資源

建立資料夾，將本地圖片放入ets資料夾下的任意位置。

Image元件引入本地圖片路徑，即可顯示圖片（根目錄為ets資料夾）

如下，自己定義一個資料夾未 icons

2、顯示網路資源

二、Image相關屬性

1、objectFit，設定縮放型別

ImageFit.Contain: 保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內。

ImageFit.Cover: 保持寬高比進行縮小或者放大，使得圖片兩邊都大於或等於顯示邊界。

ImageFit.Auto: 自適應顯示

ImageFit.Fill: 不保持寬高比進行放大縮小，使得圖片充滿顯示邊界。

ImageFit.ScaleDown: 保持寬高比顯示，圖片縮小或者保持不變

ImageFit.ScaleDown: 保持寬高比顯示，圖片縮小或者保持不變

官方示例：

三、同步載入圖片

一般情況下，圖片載入流程會非同步進行，以避免阻塞主執行緒，影響UI互動。

但是特定情況下，圖片重新整理時會出現閃爍，這時可以使用syncLoad屬性，使圖片同步載入，從而避免出現閃爍。

不建議圖片載入較長時間時使用，會導致頁面無法響應。

Image('httpUrl')
          .width(300)
          .height(300)
          .syncLoad(true) // 設定同步載入

相關文章