鸿蒙应用开发 | 图像视图(Image)的功能和用法

最新推荐文章于 2025-09-01 21:23:31 发布

转载最新推荐文章于 2025-09-01 21:23:31 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/118443021

文章标签：

#harmonyos #java #服务器

原文链接

简介

Image是用来显示图片的组件，各种图片的展示都需要该组件的使用。

用到的属性

Image的共有XML属性继承自：Component

图片的属性只有三种：裁剪方式，图片显示，缩放类型

实战

先来创建一个基本的图片显示试试吧

1，创建工程，添加一个Image

<Image
    ohos:id="$+id:image"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:layout_alignment="center"
    ohos:image_src="$media:hongmeng"
    />

1，ohos:image_src="$media:hongmeng" 是图片资源的读取
2，图片目录

2，设置缩放比例

ohos:scale_x="0.9"
ohos:scale_y="0.9"

1，缩放比例从 0-1。

3，设置缩放方式

<Image
    ohos:id="$+id:image2"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="20vp"
    ohos:layout_alignment="center"
    ohos:image_src="$media:hongmeng"
    ohos:scale_mode="zoom_center" // 缩放方式
    />

1,缩放方式有下面几种，我们只是用原图比例缩放，其它感兴趣的小伙伴可以都试试。

(1), zoom_center

表示原图按照比例缩放到与Image最窄边一致，并居中显示。

(2), zoom_start

表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示。

(3), zoom_end

表示原图按照比例缩放到与Image最窄边一致，并靠结束端显示。

(4), stretch

表示将原图缩放到与Image大小一致。

(5), center

表示不缩放，按Image大小显示原图中间部分。

(6), inside

表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。

(7), clip_center

表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。

4, 设置裁剪对齐方式

<Image
    ohos:id="$+id:image3"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="20vp"
    ohos:layout_alignment="center"
    ohos:image_src="$media:hongmeng"
    ohos:clip_alignment="center"
    />

1，设置裁剪方式

(1), left 表示按左对齐裁剪。
(2), right 表示按右对齐裁剪。
(3), top 表示按顶部对齐裁剪。
(4), bottom 表示按底部对齐裁剪。
(5), center 表示按居中对齐裁剪。

完整代码：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="top"
    ohos:orientation="vertical">
 
    <Image
        ohos:id="$+id:image1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="20vp"
        ohos:layout_alignment="center"
        ohos:image_src="$media:hongmeng"
        ohos:alpha="1"
        ohos:scale_x="0.9"
        ohos:scale_y="0.9"
        ohos:scale_mode="zoom_center"
        />
 
    <Image
        ohos:id="$+id:image2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="20vp"
        ohos:layout_alignment="center"
        ohos:image_src="$media:hongmeng"
        ohos:scale_mode="zoom_center"
        />
 
    <Image
        ohos:id="$+id:image3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="20vp"
        ohos:layout_alignment="center"
        ohos:image_src="$media:hongmeng"
        ohos:clip_alignment="center"
        />
 
</DirectionalLayout>

源码：
https://gitee.com/codegrowth/haomony-develop/tree/master/Image

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/118443021