【HarmonyOS 专题】06 简单了解 Image 图片组件 (一) 原创精华

阿策小和尚

发布于 2022-2-6 14:27

1.4w浏览

1收藏

春节不停更，此文正在参加「星光计划-春节更帖活动」
和尚在之前简单搭建了一个【登录】页面，其中用到了 *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"/>
1.
2.
3.
4.
5.
6.
7.

【HarmonyOS 专题】06 简单了解 Image 图片组件 (一)-鸿蒙开发者社区

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"/>
1.
2.
3.
4.
5.
6.
7.
8.

【HarmonyOS 专题】06 简单了解 Image 图片组件 (一)-鸿蒙开发者社区

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"/>
1.
2.
3.
4.
5.
6.
7.
8.
9.

【HarmonyOS 专题】06 简单了解 Image 图片组件 (一)-鸿蒙开发者社区

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"
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

【HarmonyOS 专题】06 简单了解 Image 图片组件 (一)-鸿蒙开发者社区

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"
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

【HarmonyOS 专题】06 简单了解 Image 图片组件 (一)-鸿蒙开发者社区

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"
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.