用HarmonyOS ArkUI调用三方库PhotoView实现图片的联播缩放

Posted 2022-12-09 _waylau

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用HarmonyOS ArkUI调用三方库PhotoView实现图片的联播缩放相关的知识，希望对你有一定的参考价值。

本文演示如果用HarmonyOS的ArkUI来调用已经上架到三方库中心的社区库。体验HarmonyOS 3最新的API 9，欢迎大家一起参与构建这个万物互联的时代！

活动主页

HarmonyOS线上Codelabs挑战赛已经开启，该系列挑战赛将围绕HarmonyOS的基础组件和容器组件、三方库和数据库等技术特性展开，开发者们可以通过体验基于HarmonyOS特性和能力的应用开发，快速构建有趣、有用的应用程序。

有兴趣的朋友一起参与吧。

活动主页：

华为开发者论坛

获取HarmonyOS应用源码

HarmonyOS的ArkUI来调用社区库的程序“ArkUIThirdPartyLibrary”，全部代码可以在《跟老卫学HarmonyOS开发》项目中找到（链接见文末“参考引用”）。有兴趣的网友可以clone该代码到本地进行运行、测试、修改。

接下来将介绍该购物应用程序“ArkUIThirdPartyLibrary”是如何实现的。

通过DevEco Studio 3创建应用

有关DevEco Studio 3的安装配置，可以参考前文《玩转HarmonyOS 3必装DevEco Studio 3，注意避弹》这里就不在赘述。

首选是打开DevEco Studio 3，可以看到如下界面。

点击“Create Project”来创建ArkUI程序“ArkUIThirdPartyLibrary”。

选择模板

选择空模板Empty Ability，点击“Next”执行下一步。

配置项目

配置项目信息，重要是以下圈中部分。其他配置按照默认配置即可。点击“Finish”执行下一步。

程序初始化完成之后，就能在该程序基础上进行代码开发、运行。

运行HarmonyOS应用

打开Device Manager

登入华为账号

点击“Sign In”登入个人注册的华为账号。如果没有，则参考本文最后的链接进行注册。

启动远程模拟器

运行应用

点击下命的三角形按钮以启动应用

应用运行效果图如下。

完善代码

在空模板的基础上，我们初步添加业务代码，来最终实现程序。

安装PhotoView组件

PhotoView是一款三方库，实现了图片缩放浏览组件，图片可缩放，平移，旋转。执行下面语句进行安装。

npm install @ohos/photoview –save复制

安装完成之后，可以看到在package.json中已经自动添加了PhotoView的依赖：

要使用PhotoView，只需要导入PhotoView的包

import PhotoView from '@ohos/photoview';复制

实现图片缩放

在Index页面中，添加如下代码：

import PhotoView from '@ohos/photoview';

@Entry
@Component
struct Index 
  @State data: PhotoView.Model = new PhotoView.Model();
  @State data1: PhotoView.Model = new PhotoView.Model();
  @State data2: PhotoView.Model = new PhotoView.Model();
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() 
    this.data
      .setImageResource($r('app.media.harmony'))
    this.data1
      .setImageResource($r('app.media.harmony1'))
    this.data2
      .setImageResource($r('app.media.harmony2'))

  

  build() 
    Column() 
      Swiper(this.swiperController) 
        PhotoView(model: this.data)
        PhotoView(model: this.data1)
        PhotoView(model: this.data2)
      
      .index(0)
      .autoPlay(true) // 自动播放
      .indicator(true) // 默认开启指示点
      .loop(true) // 默认开启循环播放
      .duration(50)
      .vertical(true) // 默认横向切换
      .itemSpace(0)
      .onChange((index: number) => 
        this.data.resetMatrix()
        this.data1.resetMatrix()
        this.data2.resetMatrix()
        console.info("ViewPager"+index.toString())
      )
    .height('100%').width('100%').backgroundColor(0x3d3d3d)
  

复制

上述代码实现了图片的自动播放、循环播放、横向切换等功能。其中图片资源放置在media目录下。