在鸿蒙应用开发中，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($r('app.media.sampleImage'))
.width(100) // 设置宽度为 100
.height(100) // 设置高度为 100
.borderRadius(20) // 圆角半径为 20
2.2 添加边框
- 使用
borderColor和borderWidth设置边框样式：
// 设置黑色边框，宽度为 2
Image($r('app.media.sampleImage'))
.borderColor(Color.Black) // 边框颜色为黑色
.borderWidth(2) // 边框宽度为 2
2.3 添加阴影效果
- 通过
shadow设置阴影，使图片更具立体效果：
// 设置灰色阴影效果
Image($r('app.media.sampleImage'))
.shadow({
color: Color.Gray, // 阴影颜色为灰色
offsetX: 4, // 阴影在 X 轴偏移 4
offsetY: 4, // 阴影在 Y 轴偏移 4
radius: 6 // 阴影模糊半径为 6
})
三、Image 组件实战：图片轮播
利用 Image 组件实现一个简单的图片轮播功能，展示多张图片并自动切换。可结合定时器和状态管理实现轮播效果。
3.1 准备图片资源
- 将图片资源放在
resources文件夹，例如：src/main/resources/base/media/light_on_1.pngsrc/main/resources/base/media/light_on_2.pngsrc/main/resources/base/media/light_on_3.pngsrc/main/resources/base/media/light_on_4.pngsrc/main/resources/base/media/light_on_5.pngsrc/main/resources/base/media/light_on_6.pngsrc/main/resources/base/media/light_on_7.png
3.2 实现图片轮播逻辑
- 假设有 7 张图片资源，使用
@State修饰的currentIndex保存当前图片索引，定时更新以实现自动轮播：
@Entry
@Component
struct Index {
// 当前显示的图片索引，初始值为 0
@State currentIndex: number = 0
build() {
Column() {
// 根据 currentIndex 显示对应图片
Image($r(`app.media.light_on_${this.currentIndex + 1}`))
.width(300) // 设置图片宽度为 300
.height(300) // 设置图片高度为 300
.objectFit(ImageFit.Contain) // 图片缩放模式为 Contain
.borderRadius(10) // 设置圆角半径为 10
.onAppear((): void => { // 在组件加载完成后启动轮播
this.startToggle();
})
}
.width('100%') // 设置 Column 宽度为 100%
.height('100%') // 设置 Column 高度为 100%
.alignItems(HorizontalAlign.Center) // 子项水平居中对齐
.justifyContent(FlexAlign.Center) // 子项垂直居中对齐
}
startToggle(): void {
// 每隔 1000ms 切换图片
setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % 7; // 假设有 7 张图片
}, 1000);
}
}
3.3 添加手动切换功能
- 增加左右切换按钮，并绑定点击事件来更新
currentIndex，实现手动切换功能：
// 创建“上一张”按钮，点击时切换到前一张图片
Button('上一张')
.onClick(() => {
// 切换到前一张图片，使用模运算保证索引循环
this.currentIndex = (this.currentIndex - 1 + 7) % 7;
})
.width(100) // 设置按钮宽度为 100
.height(40) // 设置按钮高度为 40
// 创建“下一张”按钮，点击时切换到下一张图片
Button('下一张')
.onClick(() => {
// 切换到下一张图片，使用模运算保证索引循环
this.currentIndex = (this.currentIndex + 1) % 7;
})
.width(100) // 设置按钮宽度为 100
.height(40) // 设置按钮高度为 40
四、Image 组件常见问题与优化
4.1 图片加载失败处理
- 使用
onError设置回调函数，当图片加载失败时显示占位图片或提示信息：
// 图片加载失败处理，加载失败时触发 onError 回调
Image('https://example.com/invalid.jpg')
.onError(() => {
console.log('无效图片');
})
4.2 图片加载优化
- 对于远程图片，先加载低分辨率缩略图，待加载完成后再加载高清图片，以提升页面响应速度。
4.3 使用缓存
- 为频繁加载的图片设置缓存策略，避免重复下载远程图片，优化性能。
小结
本篇详细介绍了 Image 组件的基础用法和进阶技巧，包括加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。掌握这些用法，能让你在鸿蒙应用中更灵活地展示图片内容，丰富视觉效果。
下一篇预告
下一篇将带你了解 Input 组件的使用，学习如何在鸿蒙应用中获取用户输入并处理文本内容。
Top comments (0)