鸿蒙系统（HarmonyOS）应用开发之实现瀑布流图片展示效果

项目概述

科技图库是一款基于鸿蒙系统（HarmonyOS）开发的高品质图片浏览应用，专注于展示精选科技主题图片。应用采用现代化的瀑布流布局，为用户提供流畅、直观的浏览体验，让科技之美尽收眼底。

主要功能

1. 瀑布流布局展示

• 自适应网格：采用双列瀑布流布局，根据图片原始比例自动调整显示大小
• 流畅滚动：优化的性能确保即使加载大量图片也能保持流畅的滚动体验
• 优雅加载：加载状态优雅展示，提供良好的用户反馈

2. 高清图片预览

• 全屏查看：点击任意缩略图即可进入全屏预览模式
• 智能加载：预览时显示加载进度，确保用户体验
• 容错机制：内置图片加载失败处理，确保应用稳定性

3. 用户友好界面

• 简洁设计：遵循现代设计理念，界面简洁直观
• 响应式交互：所有操作都有即时反馈，增强用户体验
• 优雅动效：精心设计的过渡效果，提升应用品质感

技术特点

鸿蒙原生开发

应用基于鸿蒙系统的ArkTS和ArkUI框架开发，充分利用了鸿蒙生态的先进特性：

• 声明式UI：使用ArkTS的声明式UI构建流畅界面
• 状态管理：采用@State等装饰器实现高效状态管理
• 自定义组件：通过@Component和@CustomDialog创建可复用组件

高效图片处理

• 智能缓存：优化图片加载和缓存策略，减少网络请求
• 延迟加载：实现图片延迟加载，提升应用启动速度
• 错误处理：完善的图片加载错误处理机制，提高应用稳定性

性能优化

• 资源管理：合理管理内存和网络资源，避免过度消耗
• 渲染优化：减少不必要的重绘，确保界面流畅响应
• 网络优化：智能处理网络请求，适应不同网络环境

用户体验亮点

• 即时反馈：所有用户操作都有清晰的视觉反馈
• 无缝浏览：从缩略图到大图预览的无缝切换体验
• 细节关注：从加载动画到错误提示，每个细节都经过精心设计

应用场景

科技爱好者的灵感来源

为科技爱好者提供高质量的科技主题图片，包括数据可视化、编程代码、高科技实验室、人工智能、未来城市等多种主题，激发创意灵感。

全部源码

import promptAction from '@ohos.promptAction';

// 定义图片数据接口
interface ImageItem {
  url: string;
  width: number;
  height: number;
  title: string;
}

// 图片预览对话框参数接口
interface ImagePreviewDialogParams {
  imageUrl: string;
  title: string;
  onClose: () => void;
}

@Entry
@Component
struct Index {
  // 模拟图片数据
  private images: ImageItem[] = [
    {
      url: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=800&h=1200&q=80',
      width: 800,
      height: 1200,
      title: '科技数据可视化'
    },
    {
      url: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=800&h=600&q=80',
      width: 800,
      height: 600,
      title: '数字代码'
    },
    {
      url: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=800&h=1000&q=80',
      width: 800,
      height: 1000,
      title: '高科技实验室'
    },
    {
      url: 'https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?auto=format&fit=crop&w=800&h=1400&q=80',
      width: 800,
      height: 1400,
      title: '人工智能概念'
    },
    {
      url: 'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=800&h=800&q=80',

      width: 800,
      height: 800,
      title: '编程代码特写'
    },
    {
      url: 'https://images.unsplash.com/photo-1563770660941-20978e870e26?auto=format&fit=crop&w=800&h=1100&q=80',
      width: 800,
      height: 1100,
      title: '未来城市'
    },
    {
      url: 'https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=800&h=900&q=80',
      width: 800,
      height: 900,
      title: '智能手表科技'
    },
    {
      url: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=800&h=700&q=80',
      width: 800,
      height: 700,
      title: '网络安全概念'
    },
    {
      url: 'https://images.unsplash.com/photo-1531297484001-80022131f5a1?auto=format&fit=crop&w=800&h=1300&q=80',
      width: 800,
      height: 1300,
      title: '虚拟现实技术'
    },
    {
      url: 'https://images.unsplash.com/photo-1488229297570-58520851e868?auto=format&fit=crop&w=800&h=1000&q=80',
      width: 800,
      height: 1000,
      title: '数据中心'
    },
    {
      url: 'https://images.unsplash.com/photo-1535223289827-42f1e9919769?auto=format&fit=crop&w=800&h=1200&q=80',
      width: 800,
      height: 1200,
      title: '机器人技术'
    },
    {
      url: 'https://images.unsplash.com/photo-1607252650355-f7fd0460ccdb?auto=format&fit=crop&w=800&h=900&q=80',
      width: 800,
      height: 900,
      title: '量子计算概念'
    }
  ]
  @State selectedImage: string = ''
  @State selectedTitle: string = ''
  @State isLoading: boolean = false
  dialogController: CustomDialogController = new CustomDialogController({
    builder: ImagePreviewDialog({
      imageUrl: this.selectedImage,
      title: this.selectedTitle,
      onClose: () => {
        this.dialogController.close()
      }
    }),
    alignment: DialogAlignment.Center,
    customStyle: true,
    autoCancel: false
  })

  aboutToAppear(): void {
    // 页面加载时的初始化操作
    this.isLoading = true
    setTimeout(() => {
      this.isLoading = false
    }, 1000) // 模拟网络加载
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      Column() {
        // 页面标题
        Row() {
          Text('瀑布流图片展示')
            .fontSize(24)
            .fontWeight(FontWeight.Bold)

          Blank()

          Button('关于')
            .fontSize(14)
            .height(32)
            .backgroundColor('#007DFF')
            .borderRadius(16)
            .onClick(() => {
              promptAction.showToast({
                message: '瀑布流布局展示与图片预览功能演示',
                duration: 2000
              })
            })
        }
        .width('100%')
        .padding({
          top: 20,
          bottom: 10,
          left: 16,
          right: 16
        })

        // 瀑布流布局
        if (!this.isLoading) {
          WaterFlow() {
            ForEach(this.images, (item: ImageItem, index: number) => {
              FlowItem() {
                Column() {
                  Image(item.url)
                    .width('100%')
                    .aspectRatio(item.width / item.height)
                    .borderRadius(8)
                    .alt('加载中...')
                    .onError(() => {
                      // 图片加载失败处理
                      promptAction.showToast({
                        message: `图片 ${index + 1} 加载失败`,
                        duration: 2000
                      })
                    })

                  Text(item.title)
                    .fontSize(14)
                    .margin({ top: 4 })
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                }
                .onClick(() => {
                  this.selectedImage = item.url
                  this.selectedTitle = item.title
                  this.dialogController.open()
                })
              }
              .width('100%')
              .margin(4)
            })
          }
          .columnsTemplate('1fr 1fr') // 两列布局
          .columnsGap(8) // 列间距
          .rowsGap(12) // 行间距
          .padding(12) // 内边距
          .width('100%')
          .layoutWeight(1) // 占满剩余空间
        } else {
          // 加载状态
          LoadingProgress()
            .width(50)
            .height(50)
            .color('#007DFF')
        }
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
  }
}

@CustomDialog
struct ImagePreviewDialog {
  private imageUrl: string = '';
  private title: string = '';
  private onClose: () => void = () => {
  };
  controller?: CustomDialogController;
  @State isLoading: boolean = true;

  constructor(params: ImagePreviewDialogParams) {
    super();
    this.imageUrl = params.imageUrl;
    this.title = params.title;
    this.onClose = params.onClose;
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      Column() {
        // 标题栏
        Row() {
          Text(this.title)
            .fontSize(18)
            .fontWeight(FontWeight.Medium)
            .fontColor('#FFFFFF')

          Blank()

          Button() {
            Image($r('sys.media.ohos_ic_public_cancel'))
              .width(24)
              .height(24)
              .fillColor('#FFFFFF')
          }
          .backgroundColor('rgba(0,0,0,0)')
          .width(36)
          .height(36)
          .onClick(() => {
            this.controller?.close()
            this.onClose()
          })
        }
        .width('100%')
        .padding(16)
        .backgroundColor('rgba(0,0,0,0.5)')

        // 图片展示
        Stack({ alignContent: Alignment.Center }) {
          Image(this.imageUrl)
            .width('100%')
            .objectFit(ImageFit.Contain)
            .layoutWeight(1)
            .onComplete(() => {
              this.isLoading = false
            })
            .onError(() => {
              this.isLoading = false
              promptAction.showToast({
                message: '图片加载失败',
                duration: 2000
              })
            })

          if (this.isLoading) {
            LoadingProgress()
              .width(50)
              .height(50)
              .color('#FFFFFF')
          }
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#000000')
    .onClick(() => {
      // 点击背景关闭
      this.controller?.close()
      this.onClose()
    })
  }
}

鸿蒙系统（HarmonyOS）应用开发之实现瀑布流图片展示效果 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯