一、支持的 XML 屬性

• Image 的共有 XML 屬性繼承自 Component，詳情請參考我的博客：HarmonyOS之組件通用的XML屬性總覽。
• Image 的自有 XML 屬性見下表：

屬性名稱中文描述取值取值說明使用案例clip_alignment圖像裁剪對齊方式left表示按左對齊裁剪ohos:clip_alignment="left"right表示按右對齊裁剪ohos:clip_alignment="right"top表示按頂部對齊裁剪ohos:clip_alignment="top"bottom表示按底部對齊裁剪ohos:clip_alignment="bottom"center表示按居中對齊裁剪ohos:clip_alignment="center"image_src圖像Element類型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源。ohos:image_src="#FFFFFFFF"
ohos:image_src="$color:black"
ohos:image_src="$media:warning"
ohos:image_src="$graphic:graphic_src"scale_mode圖像縮放類型zoom_center表示原圖按照比例縮放到與Image最窄邊一致，并居中顯示ohos:scale_mode="center"zoom_start表示原圖按照比例縮放到與Image最窄邊一致，并靠起始端顯示zoom_end表示原圖按照比例縮放到與Image最窄邊一致，并靠結束端顯示stretch表示將原圖縮放到與Image大小一致center表示不縮放，按Image大小顯示原圖中間部分inside表示將原圖按比例縮放到與Image相同或更小的尺寸，并居中顯示clip_center表示將原圖按比例縮放到與Image相同或更大的尺寸，并居中顯示

二、創建 Image

• 在“Project”窗口，打開“entry > src > main > resources > base > media”，添加一個圖片至 media 文件夾下，以“plant.JPG”為例，如下：

• 既可以在 XML 中創建 Image，也可以在代碼中創建 Image，兩種方式如下：
• • 在 XML 中創建 Image：

<Imageohos:id="$+id:image"ohos:width="match_content"ohos:height="match_content"ohos:layout_alignment="center"ohos:image_src="$media:plant"/>

• • 在代碼中創建 Image：

Image image = new Image(getContext());image.setPixelMap(ResourceTable.Media_plant);

• 效果如下：

三、使用 Image

• 設置透明度：

<Imageohos:id="$+id:image"ohos:width="match_content"ohos:height="match_content"ohos:layout_alignment="center"ohos:image_src="$media:plant"ohos:alpha="0.5"/>

• 設置透明度為0.5的效果：

• 設置縮放系數：

<Imageohos:id="$+id:image"ohos:width="match_content"ohos:height="match_content"ohos:layout_alignment="center"ohos:image_src="$media:plant"ohos:scale_x="0.5"ohos:scale_y="0.5"/>

• 設置 X 軸和 Y 軸縮放為0.5的效果：

• 設置縮放方式：當圖片尺寸與 Image 尺寸不同時，可以根據不同的縮放方式來對圖片進行縮放，如設置 Image 的寬高為200vp，以按比例縮小居中顯示為例，設置 ohos:scale_mode=“zoom_center”：

<Imageohos:id="$+id:image"ohos:width="200vp"ohos:height="200vp"ohos:layout_alignment="center"ohos:image_src="$media:plant"ohos:scale_mode="zoom_center"/>

• 設置縮放方式為 zoom_center 的效果：

• 設置裁剪對齊模式：當 Image 尺寸小于圖片尺寸時，可以對圖片進行裁剪，仍以 Image 的寬高為 200vp 為例，小于圖片尺寸，以左對齊裁剪為例，設置 clip_alignment=“left”：

<Imageohos:id="$+id:image"ohos:width="200vp"ohos:height="200vp"ohos:layout_alignment="center"ohos:image_src="$media:plant"ohos:clip_alignment="left"/>

• 設置左對齊裁剪的效果：

總結

以上是生活随笔為你收集整理的HarmonyOS之常用组件Image的功能和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。