HarmonyOS 鸿蒙Next中大图展示

HarmonyOS 鸿蒙Next中大图展示 如何实现点击图片组件进入大图展示

cke_595.png

9 回复

推荐第三方组件： MediaPreview

介绍

  • 鸿蒙原生，唯一支持按需加载，消耗资源最小的图片预览插件
  • 简单易用，支持图片、视频、动图（或者自定义其他)等预览
  • 可完全自定义使用，非常方便
  • 超多 API 可实现全部需求，比如缩放，长图，视频播放，live 图预览
  • 基于 V2 版本开发，精细控制渲染性能，大型应用开发，跨层级状态共享，复杂的状态管理需求

安装教程

执行安装命令 ohpm install @xcx/quick-preview

仓库地址：https://gitee.com/leggodd/quick-preveiw

效果图：

cke_2422.gif

更多关于HarmonyOS 鸿蒙Next中大图展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


认证下，2楼、4楼、5楼都可以实现你的查看大图功能。

点击图片，将图片地址传入图片组件库就可以了。

推荐 IBest UI库

ImagePreview 图片预览

基础用法

cke_2010.png

自定义遮罩颜色

cke_2575.png

推荐使用三方库 hdimageviewer

专门为OpenHarmony打造用于显示大图、长图、超大图（.jpg,.png）的组件，根据分辨率和缩放大小来动态控制图片的采样率，进行自适应分块渲染，在不超过应用内存水位的情况下能够展示原图。

功能简介

本项目参考开源库subsampling-scale-image-view进行OpenHarmony的自研版本：

  • 支持超大图的降采样，区域解码与分块加载，减少应用内存开销；
  • 支持预览图显示；
  • 支持图片放大/缩小操作，同时支持缩放手势、双击手势的控制；允许指定图片缩放倍数阈值；
  • 支持图片平移操作，同时支持平移手势的控制；
  • 支持图片旋转操作，同时支持获取资源文件中EXIF字段并自动旋转；
  • 支持动画操作；
  • 支持获取图片资源属性，支持获取图片当前显示状态，支持接收图片加载状态，显示状态变化事件回调；
  • 支持调试模式；
import { HDImageViewer } from 'hdimageviewer';

@Entry
@Component
struct HDImageViewerImage {
@State srcInfo: HDImageViewer.ImageResourceInfo = {
  src: $r("app.media.swissroad"),
  previewSrc: $r("app.media.swissroad_thumbnail")
};
private controller: HDImageViewer.Controller = new HDImageViewer.Controller();
  async aboutToAppear() {
    // Other settings
    this.controller.setOrientation(HDImageViewer.Orientation.ORIENTATION_90);
  }
    build() {
        HDImageViewer({ src: this.src, previewSrc: this.previewSrc, controller: this.controller })
        .width('100%')
        .height('100%')
    }
}

希望HarmonyOS能继续优化系统稳定性，减少崩溃和重启的情况。

使用共享元素转场 (sharedTransition)

详见官方示例

6

在HarmonyOS Next中展示大图，可使用Image组件并设置displayPriority属性为High，以优化加载性能。通过PixelMap进行图片解码与处理，支持渐进式加载。建议结合LazyForEach实现列表中的懒加载，避免内存占用过高。使用ImageCache进行缓存管理，提升重复访问效率。

在HarmonyOS Next中实现点击图片进入大图展示，推荐使用ImagePreview组件。这是系统提供的高性能图片预览方案，支持手势缩放、滑动切换等交互。

核心实现步骤：

  1. 导入组件：
import { ImagePreview } from '@kit.ArkUI';
  1. 绑定点击事件：
Image($r('app.media.previewImage'))
  .width(100)
  .height(100)
  .onClick(() => {
    // 触发预览
  })
  1. 调用预览接口：
ImagePreview.show({
  sources: [
    {
      uri: $r('app.media.previewImage')
    }
  ],
  current: 0  // 当前显示索引
})

关键特性：

  • 支持网络图片、本地资源、PixelMap等多种源类型
  • 可配置起始位置、背景色、显示模式
  • 支持多图滑动预览
  • 提供显示/隐藏回调

注意事项：

  • 大图加载建议配合Image组件的alt属性设置占位图
  • 网络图片需配置网络权限
  • 预览组件为模态窗口，会覆盖当前页面

此方案直接调用系统能力，无需自行实现缩放和手势逻辑，性能最优。

回到顶部