回复
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局 原创
SoraLuna
发布于 2024-12-23 22:40
浏览
0收藏
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
关键词
- UI互动应用
- 照片墙布局
- Grid 布局
- 动态图片加载
- 用户交互
一、功能说明
照片墙布局应用的特点:
- 动态加载多张图片组成网格布局。
- 用户点击图片时,能够查看对应的图片状态(如编号)。
二、所需组件
@Entry
和@Component
装饰器Grid
布局组件用于照片墙布局Image
组件用于动态加载图片Text
组件用于显示状态信息@State
修饰符用于状态管理
三、项目结构
- 项目名称:
PhotoWallApp
- 自定义组件名称:
PhotoWallPage
- 代码文件:
PhotoWallPage.ets
、Index.ets
四、代码实现
// 文件名:PhotoWallPage.ets
@Component
export struct PhotoWallPage {
@State selectedImage: string = ''; // 记录选中的图片路径
@State isPreviewVisible: boolean = false; // 是否显示图片预览
@State previewImage: string = ''; // 预览图片路径
private images: string[] = [
'light_on_1', 'light_on_2', 'light_on_3',
'light_on_4', 'light_on_5', 'light_on_6'
]; // 图片资源名称
build() {
Row({ space: 20 }) {
// 预览区域:放置预览图
Column({ space: 10}) {
if (this.isPreviewVisible) {
Image(this.getImagePath(this.previewImage))
.width('100%') // 设置预览图宽度为父容器的 100%
.height('80%')
.borderRadius(8)
.objectFit(ImageFit.Contain) // 保证图片按比例显示
.zIndex(2); // 设置图片的层级高于遮罩层
Text(this.selectedImage)
.fontSize(20) // 平板设备调整字体大小
.fontColor(Color.Blue)
.alignSelf(ItemAlign.Center)
.margin({ top: 20 })
}
}
.width('40%') // 设置预览区的宽度占 40%
.height('100%')
.padding(10)
.alignSelf(ItemAlign.Center)
// 照片墙区域:展示图片墙
Column({ space: 20 }) {
// 照片墙标题
Text('照片墙布局')
.fontSize(28) // 调整字体大小适合平板
.fontWeight(FontWeight.Bold)
.alignSelf(ItemAlign.Center)
.margin({ top: 20 });
// 使用 Grid 渲染动态图片
Grid() {
ForEach(this.images, (image: string) => {
GridItem() {
Row({ space: 10 }) {
// 使用统一大小的图片,添加懒加载或占位图提升性能
Image(this.getImagePath(image)) // 动态加载图片
.width('90px') // 适应平板屏幕宽度
.height('90px') // 保持统一的高度
.borderRadius(8)
.onClick(() => this.showPreview(image)) // 点击图片显示预览
.objectFit(ImageFit.Contain); // 保证图片显示不变形
}
}
});
}
.padding(10)
.width('100%')
.height('auto') // 保证 Grid 自适应高度
// 预览区域:放置预览图
Column({ space: 10}) {
if (this.isPreviewVisible) {
Image(this.getImagePath(this.previewImage))
.width('100%') // 设置预览图宽度为父容器的 100%
.height('80%')
.borderRadius(8)
.objectFit(ImageFit.Contain) // 保证图片按比例显示
.zIndex(2); // 设置图片的层级高于遮罩层
}
}
.width('40%') // 设置预览区的宽度占 40%
.height('100%')
.padding(10)
.alignSelf(ItemAlign.Center)
}
.width('60%') // 照片墙区域宽度占 60%
.height('100%')
.padding(10)
.backgroundColor('#F8F8F8') // 设置浅色背景
}
.width('100%')
.height('100%');
}
// 获取图片的完整路径
private getImagePath(image: string): Resource {
return $r(`app.media.${image}`);
}
// 显示图片预览
private showPreview(image: string) {
this.previewImage = image;
this.isPreviewVisible = true;
this.selectedImage = image; // 更新选中的图片
}
}
// 文件名:Index.ets
import { PhotoWallPage } from './PhotoWallPage';
@Entry
@Component
struct Index {
build() {
Column() {
PhotoWallPage() // 调用照片墙页面
}
.padding(20)
}
}
效果示例:通过网格布局展示多张图片,用户点击某张图片后,状态文本会更新显示该图片的编号。
五、代码解读
- 动态图片加载:通过
ForEach
渲染动态图片列表,并为每张图片绑定点击事件。 - 状态管理:使用
@State selectedImage
动态更新用户点击的图片状态。 - 网格布局:使用
Grid
实现照片墙的整齐排列。
六、优化建议
- 添加图片放大功能:点击图片后可显示放大的版本,提升用户体验。
- 图片动态更新:允许用户上传图片或从图库加载更多图片。
- 自定义布局样式:提供多种照片墙布局选择,如横向滚动或不同尺寸的网格组合。
七、相关知识点
小结
通过照片墙布局应用的实现,用户可以学习动态图片加载、状态管理和网格布局的基本用法。
下一篇预告
在下一篇「UI互动应用篇18 - 多滑块联动控制器」中,我们将探索如何实现多个滑块之间的联动控制,并动态显示各滑块的状态。
上一篇: 「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
下一篇: 「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=341
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2024-12-24 00:01:13修改
赞
收藏
回复
相关推荐