【鸿蒙应用开发基础】常用组件Image详解

最新推荐文章于 2025-05-22 18:00:00 发布

「已注销」

最新推荐文章于 2025-05-22 18:00:00 发布

阅读量2.1k

点赞数 19

CC 4.0 BY-SA版权

文章标签： harmonyos 华为鸿蒙鸿蒙系统

本文链接：https://blog.youkuaiyun.com/HarmonyOS_001/article/details/139660015

前言

对于新手开发者来说，了解并掌握鸿蒙常用组件的使用方法是开启鸿蒙应用开发之旅的重要一步。在本文中，我们将为你介绍一些常用的鸿蒙组件，以及如何使用它们来构建出色的用户界面。通过学习和实践这些组件，你将能够创建出美观、直观且易于使用的应用程序。

Image组件是鸿蒙ArkUI中非常重要的组件之一，它可以帮助你在应用程序中展示各种精美的图片，以提升用户体验。在本文中，我们将学习如何使用Image组件。你将学到如何显示图片，如何调整图片的大小，如何创建圆形图片，以及如何为图片添加遮罩文本。

创建新项目

首先，打开鸿蒙开发者工具（DevEco Studio）,并选择需要的 Ability 工程模板，创建一个新的 ArkUI 项目。单击Next按钮，如下图所示。
在这里插入图片描述

进入下一个界面，填写工程相关信息，主要选择Compile SDK，Language和Device Type，其他保持默认值即可，单击Finish按钮，如下图所示。
在这里插入图片描述

工程创建完成后，DevEco Studio 会加载index.ets文件并显示预览画布。

创建 Image 组件

要使用 Image 组件加载图片，首先需要将图片导入到 media 目录中。例如，我们将 test.png 图片拖到 media 目录中。如下图所示。
在这里插入图片描述

要在界面中显示图片，你需要给 Image 组件设置图片的地址，宽和高，图片就能加载出来。代码如下:

Image($r('app.media.test')).width(200).height(200)

在代码中，你只需要指定图片在 media 目录下的名称，就可以在界面中看到图片。
但是，由于图片的分辨率为 344*496，因此你只能看到图片的一部分。如下图所示。
在这里插入图片描述

设置缩放类型

为了使图片在页面中有更好的显示效果，需要对图片进行缩放处理。你可以使用 objectFit 属性设置图片的缩放类型，objectFit 的参数类型为 ImageFit。

默认情况下，图片会保持宽高比。例如在上一节中，图片会按比例缩小。如果将 objectFit 属性的值更改为 ImageFit.Contain，则图片会保持宽高比，不同的是图片会完全显示在显示边界内。如下图所示。
在这里插入图片描述

在某些情况下，你可能希望将图像拉伸到尽可能大，你可以将 objectFit 属性的值更改为 ImageFit.Fill,但此时图片不会保持宽高比。如下图所示。
在这里插入图片描述

除了以上几种类型，你还可以设置其他的类型，如 Auto，ScaleDown。

设置插值效果

如果你查看界面中的图片，并将其与原始图片进行比较，你会发现界面中显示的图片有些模糊，而且图片会显示锯齿。你可以使用 interpolation 属性来设置图片的插值效果，即减轻低清晰度图片在放大显示时出现的锯齿问题。代码如下:

 .interpolation(ImageInterpolation.High)

你可以指定 interpolation 属性的值为 ImageInterpolation.High，这样图片会清晰的显示。效果如下图所示。
在这里插入图片描述

注意：svg 类型图源不支持该属性。PixelMap 资源不支持该属性。

图片裁剪

在 ArkUI 中还提供了形状裁剪的属性，来对组件进行裁剪、遮罩处理。你可以使用 clip 属性按指定的形状（圆形，椭圆形和矩形）对当前组件进行裁剪。例如，你要将图片裁剪成圆形，你可以指定裁剪形状为圆形的组件，如下所示：

Image($r('app.media.test')).width(200).clip(new Circle({width: 200,height:200}))

在以上的代码中，我们指定将图片裁剪成圆形。你可以指定不同的形状进行裁剪，如下图所示。
在这里插入图片描述

设置透明度

在 ArkUI 的通用属性中提供了一个opacity属性，你可以使用该属性来设置控件的透明度。传递一个介于 0 和 1 之间的值来设置控件的透明度。1表示不透明，0表示完全透明。代码如下:

.opacity(0.3)

例如，如果将 opacity 属性应用于 Image 组件并将其值设置为 0.3，则 Image 组件将变为部分透明的。如下图所示。
在这里插入图片描述

设置填充颜色

在 ArkUI 中，你可以使用 fillColor 属性，设置填充颜色，设置后填充颜色会覆盖在图片上。代码如下:

Image($r('app.media.ic_device_earphone_hero')).width(50).height(50).fillColor(Color.Blue)

你可以通过更改 fillColor 属性的值来调整图片的颜色。效果如下图所示。
在这里插入图片描述

注意：仅对 svg 图源生效，设置后会替换 svg 图片的填充颜色。

添加遮罩文本

在设计应用程序时，你可能需要在图片组件上叠加一段文本。ArkUI 框架为开发人员提供了一个名为overlay的通用属性，用来在当前组件上，增加遮罩文本。代码如下所示。

Image($r('app.media.test')).interpolation(ImageInterpolation.High)
.overlay('海内存知己，天涯若比邻。',{ align: Alignment.Bottom, offset: { x: 0, y: -20 } })

在overlay属性中，你可以指定遮罩层的文本内容，文本内容将覆盖在图片上。该属性还提供一个可选值来调整文本的位置，默认情况下，文本位置处于组件左上角。你可以将 align 的值设置为 Alignment.Bottom，这样文本就会定位到图片的底部。你还可以使用 offset 指定文本的偏移量。如下图所示。
在这里插入图片描述

加载网络图片

要加载网络图片，首先需要申请权限，你需要在 module.json5 文件中申请网络访问权限。如下所示。
在这里插入图片描述

Image 组件支持加载网络图片，将图片地址更改成网络图片地址进行加载。代码如下:

Image('https://res8.vmallres.com/pimages/uomcdn/CN/pms/202309/gbom/6942103107191/800_800_53550DB45801F3BA74E0C384839E41A2mp.png')
.width(300).height(300)

此时，你可以在界面中查看网络图片。效果如下所示。
在这里插入图片描述