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

阿策小和尚
发布于 2022-2-6 14:27
浏览
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"/>

【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"/>

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

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

    scale_xscale_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"/>

【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"

【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"

【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"

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

    和尚主要学习了 Image 的几个常见的属性,后续会逐渐对 Image 进行深入探索;如有错误,请多多指导!

来源:阿策小和尚

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏 1
回复
举报
回复
    相关推荐