【HarmonyOS 專題】06 簡單瞭解 Image 圖片組件 (一)

    小菜在之前簡單搭建了一個【登錄】頁面，其中用到了 Image 圖片組件，小菜今天簡單學習一下常用的 Image 組件；

Image

    Image 繼承自 Component 基礎組件類，與 Android 類似；小菜優先學習一下幾個常見的重要屬性；

1. image_src 圖片資源

    Image 通過 image_src 來引入本地圖片資源，與 Android 類似，很容易理解；

<Image
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:background_element="$color:color_btn_start"
    ohos:image_src="$media:icon_hzw01"
    ohos:layout_alignment="center"
    ohos:margin="10vp"/>

2. alpha 透明度

    Image 通過 alpha 設置圖片透明度，其中需要注意的是，透明度影響的是整個 Image 組件，包括圖片背景效果；

<Image
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alpha="0.5"
    ohos:background_element="$color:color_btn_start"
    ohos:image_src="$media:icon_hzw01"
    ohos:layout_alignment="center"
    ohos:margin="10vp"/>

3. scale_x & scale_y 水平 & 垂直縮放比例

    scale_x 和 scale_y 分別對應水平方向和垂直方向圖片的縮放比例，當設置縮放時，只是圖片展示效果縮放，但圖片的整體尺寸並未影響；

<Image
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:background_element="$color:color_btn_start"
    ohos:image_src="$media:icon_hzw01"
    ohos:layout_alignment="center"
    ohos:margin="10vp"
    ohos:scale_x="0.5"
    ohos:scale_y="0.5"/>

4. scale_mode 填充方式

    scale_mode 對應圖片的填充方式，當設置寬高屬性與原始圖片不一致時，爲了相同的顯示效果，通常設置 scale_mode 圖片的填充方式；

• center：以原始圖片中心擴展圖片，截取展示 Image 設置的寬高尺寸，整個過程圖片不會縮放，center 爲圖片的默認填充方式；
• zoom_start：原始圖片按比例縮放到 Image 設置的最小的寬或高尺寸，並以開始方向對齊，大部分情況是從左向右方向，但是阿拉伯語等是從右向左方向；
• zoom_center：原始圖片按比例縮放到 Image 設置的最小的寬或高尺寸，並居中對齊；
• zoom_end：原始圖片按比例縮放到 Image 設置的最小的寬或高尺寸，並以結束方向對齊；
• clip_center：以原始圖片中心縮放圖片，直到原始圖的最小寬高之一滿足 Image 設置的最小寬高之後，整體進行縮放，再進行裁剪；
• inside：以原始圖片中心對圖片進行縮放，直到原始圖的最大寬高滿足 Image 設置的最小寬高時，整體進行縮放；
• stretch：以 Image 設置寬高爲基礎，對原始圖片進行水平垂直放心壓縮或拉伸，將整個圖片存放在設置的 Image 中；

<Image
    ohos:height="100vp"
    ohos:width="100vp"
    ohos:background_element="$color:color_btn_start"
    ohos:image_src="$media:icon_hzw02"
    ohos:layout_alignment="center"
    ohos:margin="10vp"
    ohos:scale_mode="center"/>

// 順序
1. ohos:scale_mode="inside"
2. ohos:scale_mode="center"
3. ohos:scale_mode="zoom_start"
4. ohos:scale_mode="zoom_center"
5. ohos:scale_mode="zoom_end"
6. ohos:scale_mode="clip_center"
7. ohos:scale_mode="stretch"

5. clip_alignment 裁剪方式

    clip_alignment 爲圖片的裁剪方式，多種對齊方式可以共同使用，互相影響；

• center：以圖片中心對齊裁剪，默認方式；
• left：以圖片居左對齊裁剪；
• right：以圖片居右對齊裁剪；
• top：以圖片居頂對齊裁剪；
• bottom：以圖片居底對齊裁剪；

<Image
    ohos:height="150vp"
    ohos:width="150vp"
    ohos:background_element="$color:color_btn_start"
    ohos:clip_alignment="center"
    ohos:image_src="$media:icon_hzw02"
    ohos:layout_alignment="center"
    ohos:margin="10vp"/>
    
// 順序
1. ohos:clip_alignment="center"
2. ohos:clip_alignment="top"
3. ohos:clip_alignment="bottom"
4. ohos:clip_alignment="left"
5. ohos:clip_alignment="right"
6. ohos:clip_alignment="bottom|right"

6. clip_direction 裁剪方向

    clip_direction 爲裁剪方向，Image 提供了兩種裁剪方式，默認的 vertical 垂直方向和 horizontal 水平方向；當設置 horizontal 水平方向裁時，只會原始圖片水平居中的位置進行裁剪；

<Image
    ohos:height="150vp"
    ohos:width="150vp"
    ohos:background_element="$color:color_btn_start"
    ohos:clip_alignment="bottom|right"
    ohos:clip_direction="horizontal"
    ohos:image_src="$media:icon_hzw02"
    ohos:layout_alignment="center"
    ohos:margin="10vp"/>

// 順序
1. ohos:clip_alignment="center"
2. ohos:clip_alignment="top"
3. ohos:clip_alignment="bottom"
4. ohos:clip_alignment="left"
5. ohos:clip_alignment="right"
6. ohos:clip_alignment="bottom|right"

    小菜主要學習了 Image 的幾個常見的屬性，後續會逐漸對 Image 進行深入探索；如有錯誤，請多多指導！

來源：阿策小和尚