「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用

在鸿蒙应用开发中，Image 组件用于加载和表现图片资源，并提供多种属性来控制图片的表现效果和适配方式。本篇将带你学习如安在鸿蒙应用中加载本地和长途图片、设置图片样式以及实现简单的图片轮播功能。

关键词

• Image 组件
  
• 图片加载
  
• 本地资源
  
• 长途图片
  
• 图片轮播
  

<hr> 一、Image 组件基础

Image 组件重要用于表现图片资源，支持加载本地和长途图片，并能通过多种方式控制图片的巨细和缩放模式。
1.1 加载本地图片

• 将图片资源放在项目标 resources 文件夹下，使用 $r 引用图片：
  
  1. // 加载本地图片，引用路径为资源文件夹中的 app.media.sampleImage
  2. Image($r('app.media.sampleImage'))

  复制代码

1.2 加载长途图片

• 直接传入图片 URL，即可实现长途图片的加载：
  
  1. // 加载远程图片，通过 URL 直接加载网络图片
  2. Image('https://example.com/sample.jpg')

  复制代码

1.3 设置图片巨细

• 使用 width 和 height 来指定图片尺寸：
  
  1. // 设置图片大小为 100x100
  2. Image($r('app.media.sampleImage'))
  3.   .width(100)  // 设置宽度为 100
  4.   .height(100) // 设置高度为 100

  复制代码

1.4 图片缩放模式

• 使用 objectFit 设置图片的缩放模式（如添补、适应、覆盖等）：
  
  1. // 使用 Cover 模式填充图片，可能会裁剪图片边缘
  2. Image($r('app.media.sampleImage'))
  3.   .objectFit(ImageFit.Cover)

  复制代码
         缩放模式     形貌                   ImageFit.Cover     图片覆盖整个地区，可能部门裁剪             ImageFit.Contain     图片适应地区，保持宽高比             ImageFit.Fill     图片拉伸填满整个地区             ImageFit.ScaleDown     图片缩小适应地区，不放大   
  

<hr> 二、Image 组件样式与圆角

Image 组件支持多种样式设置，包括圆角、边框和阴影效果，使图片展示更具个性化。
2.1 设置圆角

• 使用 borderRadius 设置图片的圆角效果：
  
  1. // 设置图片圆角为 20
  2. Image

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告