在鸿蒙应用开发中,Image
组件用于加载和显示图片资源,并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。
关键词
- Image 组件
- 图片加载
- 本地资源
- 远程图片
- 图片轮播
一、Image 组件基础
Image
组件主要用于显示图片资源,支持加载本地和远程图片,并能通过多种方式控制图片的大小和缩放模式。
1.1 加载本地图片
-
将图片资源放在项目的
resources
文件夹下,使用$r
引用图片:// 加载本地图片,引用路径为资源文件夹中的 app.media.sampleImage Image($r('app.media.sampleImage'))
1.2 加载远程图片
-
直接传入图片 URL,即可实现远程图片的加载:
// 加载远程图片,通过 URL 直接加载网络图片 Image('https://example.com/sample.jpg')
1.3 设置图片大小
-
使用
width
和height
来指定图片尺寸:// 设置图片大小为 100x100 Image($r('app.media.sampleImage')).width(100) // 设置宽度为 100.height(100) // 设置高度为 100
1.4 图片缩放模式
-
使用
objectFit
设置图片的缩放模式(如填充、适应、覆盖等):// 使用 Cover 模式填充图片,可能会裁剪图片边缘 Image($r('app.media.sampleImage')).objectFit(ImageFit.Cover)
缩放模式 描述 ImageFit.Cover
图片覆盖整个区域,可能部分裁剪 ImageFit.Contain
图片适应区域,保持宽高比 ImageFit.Fill
图片拉伸填满整个区域 ImageFit.ScaleDown
图片缩小适应区域,不放大
二、Image 组件样式与圆角
Image
组件支持多种样式设置,包括圆角、边框和阴影效果,使图片展示更具个性化。
2.1 设置圆角
-
使用
borderRadius
设置图片的圆角效果:// 设置图片圆角为 20 Image