HarmonyOS开发指南：图片预览组件-image-preview

此版本为 bate 版本，相较于上个版本，取消了旋转手势，把双指滑动功能修改为单指滑动。

已知问题：在触发放大手势时，若滑动速度过快会出现图片中心丢失问题。

简介

image-preview 提供图片预览组件，支持缩放和平移，提供一些自定义属性和事件监听。

下载安装

ohpm install @rv/image-preview

权限

无需权限,若使用网络资源图片，需要互联网访问权限。

属性列表

属性名	类型	必须	默认值	描述
option	ImagePreViewOption	是	null	配置选项，集体如下介绍

ImagePreViewOption

构造函数

constructor(images: ImageType[] = [])
其中:
type ImageType = PixelMap | ResourceStr | DrawableDescriptor

接口说明

接口均支持链式调用

1. 设置内部图片内容

   setImage(images: ImageType[])
   

2. 添加图片

   addImage(images: ImageType
   

3. 删除图片

   /**
   * 删除指定图片
   * @param index 需要删除的图片位置
   * @returns
   */
   removeImage(index: number)
   

4. 设置背景颜色，默认值：Color.Transparent

   /**
    * 设置背景颜色
    * @param bgColor 背景颜色
    */
   setBackgroundColor(bgColor: ResourceColor)
   

5. 设置第一次展示的图片位置，默认值 0

   /**
    * 设置展示页
    * @param showIndex 索引
    */
   setShowIndex(showIndex: number)
   

6. 设置缓存数量，默认值 0

   /**
    * 设置缓存数量
    * @param cachedCount 缓存数量
    */
   setCachedCount(cachedCount: number)
   

7. 设置长按事件回调

   /**
    * 设置长按事件
    * @param event 事件回调函数
    *    其中：
    *      event: GestureEvent，与手势事件一致
    *      index: 当前长按的图片索引
    */
   setLongPressListener(event: (event: GestureEvent, index: number) => void)
   

8. 设置单击事件回调

   /**
    * 设置单击事件
    * @param event 事件回调函数
    *    其中：
    *      event: ClickEvent，与点击事件一致
    *      index: 当前点击的图片索引
    */
   setOnClickListener(event: (event: ClickEvent, index: number) => void)
   

9. 设置下拉事件回调

   /**
    * 设置下拉事件
    * @param event 事件回调函数
    *    其中
    *      index: 当前下拉的页面索引
    * @returns
    */
   setOnPullDownListener(event: (index: number) => void)
   

10. 设置翻页事件回调

    /**
     * 设置翻页事件回调
     * @param event 事件回调函数
     *    其中
     * @param prePage: 翻页前处于的页面索引
     * @param nextPage: 即将去往的页面索引
     * @returns
     */
    setFlipListener(event: (prePage: number, nextPage: number) => void)
    

11. 设置是否允许缩放，默认值：true

    /**
     * 是否允许缩放
     * @param zoomEnabled
     */
    setZoomEnabled(zoomEnabled: boolean)
    

12. 设置共享元素转场id生成策略，默认生成策略 image.toString() + index

    /**
     * 设置共享元素转场id生成策略
     *    其中
     *      image：此图片的src
     *      index：图片的索引
     */
    setSharedIdGenerate(event: (image: ImageType, index: number) => string)
    

13. 设置即将翻页的回调事件

    /**
     * 设置即将翻页的回调事件，回调在手指滑动时触发，在手指未松开前会持续调用，它会先于翻页事件回调(FlipListener),
     */
    setAboutToTurnPageListener(event: (page: number) => void)
    

14. 设置最大缩放比，默认值：2

    /**
     * 最大缩放比
     * @param maxScale 大于 1 ，小于 1 的按 1 计算
     */
    setMaxScale(maxScale: number
    

15. 设置最小缩放比，默认值：0.5

    /**
     * 最小缩放比
     * @param minScale maxScale 小于 1 ，大于 1 的按 1 计算
     */
    setMinScale(minScale: number)
    

16. 设置指示器选中颜色，默认值：Color.Blue

    /**
     * 设置指示器选中颜色
     */
    setIndicatorCheckedColor(indicatorCheckedColor: ResourceColor)
    

17. 设置指示器未选中颜色，默认值：Color.Gray

    /**
     * 设置指示器未选中颜色
     */
    setIndicatorUnselectedColor(indicatorUncheckedColor: ResourceColor)
    

18. 设置指示器类型，默认值：IndicatorType.Dot

    /**
     * 设置指示器类型
     */
    setIndicatorType(type: IndicatorType)
    

    其中：

    export enum IndicatorType {
      Dot, // 圆点指示器
      Number, // 文本指示器
      None // 无指示器
    }
    

共享元素转场

当配置共享元素转场id生成策略后，源图片的共享元素id也必须与其一致，例如：

Image(item)
  .width(100)
  .height(100)
  .margin(10)
  .sharedTransition(JSON.stringify(item) + index)

// 那么配置的共享元素转场id生成策略需要是
.setSharedIdGenerate((image: ImageType, index: number) => JSON.stringify(item) + index)

使用示例

列表页：

import { router } from '@kit.ArkUI'

@Entry
@Component
struct ImagePreViewPageIndex {
  @State images: ResourceStr[] = [
    $r('sys.media.ohos_save_button_line'),
    $r('sys.media.ohos_icon_mask_svg'),
    $r('sys.media.ohos_ic_public_video'),
    $r('sys.media.ohos_user_auth_icon_fingerprint'),
    $r('sys.media.ohos_ic_public_select_all'),
  ]

  build() {
    Row() {
      Column() {
        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach(this.images, (item: ResourceStr, index: number) => {
            Image(item)
              .width(100)
              .height(100)
              .margin(10)
              .sharedTransition(JSON.stringify(item) + index)
              .onClick(() => {
                router.pushUrl({
                  url: 'pages/ImagePreViewPage',
                  params: this.images
                })
              })
          })
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

预览页：

import { ImagePreView, ImagePreViewOption } from '@rv/image-preview/Index'
import { promptAction, router } from '@kit.ArkUI'

@Entry
@Component
struct ImagePreViewPage {
  images: ResourceStr[] = router.getParams() as ResourceStr[]
  @State imagePreViewOption: ImagePreViewOption = new ImagePreViewOption()

  aboutToAppear(): void {
    this.imagePreViewOption
      .setImage(this.images)
      .setLongPressListener((_, index) => {
        promptAction.showToast({ message: "长按" + index.toString() })
      })
      .setOnPullDownListener((index) => {
        router.back()
      })
      .setOnClickListener((_, index) => {
        promptAction.showToast({ message: "单击" + index.toString() })
      })
      .setAboutToTurnPageListener((page) => {
        promptAction.showToast({ message: "即将去往" + page.toString() })
      })
      .setCachedCount(0)
      .setMinScale(0.5)
      .setBackgroundColor(Color.White)
      .setFlipListener(() => {
        promptAction.showToast({
          message: "翻页"
        })
      })
      .setSharedIdGenerate((item,index) => JSON.stringify(item) + index)
      // .setIndicatorType(IndicatorType.None)
  }

  build() {
    Column() {
      ImagePreView({ option: this.imagePreViewOption })
    }
    .width("100%")
    .height("100%")
  }
}

效果如下：

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？但是又不知道从哪里下手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~~

一、鸿蒙（HarmonyOS NEXT）最新学习路线

​

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程

​

三、《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​

四、大厂面试必问面试题

​

五、鸿蒙南向开发技术

​

六、鸿蒙APP开发必备

​

完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。