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

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

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

活动主页

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

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

活动主页:

https://developer.huawei.com/consumer/cn/forum/topic/0202103392123890120?fid=0101587866109860105

获取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目录下。

程序运行效果

完整演示视频见B站:https://www.bilibili.com/video/BV1Rg411i7y1/

相关问题

问题:@ohos/photoview not found

报错信息如下:

>npm install @ohos/photoview --save
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmmirror.com/@ohos%2fphotoview - [NOT_FOUND] @ohos/photoview not found
npm ERR! 404
npm ERR! 404 '@ohos/photoview@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\wayla\AppData\Roaming\npm-cache\_logs\2022-11-13T13_13_32_065Z-debug.log复制

解决方法:

设置npm的镜像

npm config set @ohos:registry=https://repo.harmonyos.com/npm/复制

源码

https://github.com/waylau/harmonyos-tutorial 中的“ArkUIThirdPartyLibrary”

参考引用

目录
相关文章
|
28天前
|
缓存 JSON JavaScript
鸿蒙开发实现图片上传(上传用户头像)
本内容介绍了一种基于HarmonyOS的应用场景,主要实现图片选择、拷贝到缓存目录以及上传的功能。首先通过系统文件选择器(FilePicker)选择图片,无需额外权限;接着使用`fs`模块将选中的图片复制到应用缓存目录(cacheDir),以满足上传功能的路径要求;最后利用`request.uploadFile`方法将图片上传至服务器,并处理响应结果。代码详细展示了每个步骤的实现逻辑,包括图片选择、文件操作和网络请求,适用于需要实现图片上传功能的开发者。
|
18天前
|
缓存 容器
鸿蒙5开发宝藏案例分享---一多开发实例(图片美化)
鸿蒙开发宝藏案例分享:用一套代码搞定手机、折叠屏、平板和PC的图片美化应用!案例解析四大核心技术点:相册页动态列数、大图预览双指缩放、编辑页布局自动翻转及分层架构设计。更有开发避坑指南与实战心得,助你高效完成多端适配,提升开发效率!
|
10天前
|
JavaScript 前端开发 IDE
鸿蒙开发:了解布局分析ArkUI Inspector
ArkUI Inspector,知名其意,就是UI检查,它可以让开发者在DevEco Studio中快速的查看一个应用在模拟器或者真机上的UI显示效果,并且可以通过查看多次操作后的界面状态,来快速的分析定位UI界面存在的问题。
鸿蒙开发:了解布局分析ArkUI Inspector
|
3月前
HarmonyOS NEXT - ArkUI: Text组件
Text组件用于展示文本信息并支持子组件Span,可配置多种样式属性。包括设置文本颜色(.fontColor)、尺寸(.fontSize)、字体样式(.fontStyle)、粗细(.fontWeight)、主题(.fontFamily)等。此外,还支持文本对齐(.textAlign)、超长处理(.textOverflow与.maxLines配合)、装饰线(.decoration)等功能。示例代码展示了如何应用这些属性实现丰富的文本效果。
176 72
|
20天前
|
JavaScript 开发者 C++
HarmonyOS NEXT ArkUI生命周期终极指南 | 组件与页面的关系
本文是关于 HarmonyOS NEXT 中 ArkUI 生命周期的终极指南,深入解析组件与页面的关系及其生命周期特性。文章通过超全场景案例、隐藏技巧和避坑秘籍,帮助开发者轻松掌握生命周期管理。内容涵盖页面级(如 `onPageShow`、`onPageHide`)与组件级(如 `aboutToAppear`、`onDidBuild`)生命周期的区别与应用,并提供实战代码示例,包括基础版与高阶版用法。此外,还总结了十大避坑指南和神奇技巧,如实现页面停留统计与双击退出功能。掌握这些知识,助你精准控制 UI 更新,掌控组件与页面的生死轮回!
53 2
|
26天前
|
存储 安全 Android开发
HarmonyOS实战:一招搞定保存图片到相册
本文介绍了在鸿蒙系统中实现保存图片到相册的功能,包括申请权限和使用系统安全控件两种方式。文中详细讲解了如何通过网络请求下载图片并保存为本地文件,以及如何将指定布局生成图片并保存。鸿蒙系统对权限管理较为严格,推荐使用系统提供的安全控件(如 SaveButton)以保护用户隐私,避免手动申请权限。此外,文章还对比了鸿蒙与 Android/iOS 的实现差异,指出鸿蒙在功能实现上更简单,但需注意权限规范以确保项目顺利上线。
133 0
HarmonyOS实战:一招搞定保存图片到相册
|
2月前
|
存储 人工智能 物联网
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
109 14
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
|
3月前
|
开发者 容器
HarmonyOS NEXT - ArkUI: Button组件
Button是用于响应用户点击操作的按钮组件,支持胶囊型、圆形和普通三种样式。可通过`type`属性设置样式(默认为胶囊型),并使用`stateEffect`控制按压态效果(默认开启)。Button可包含子组件,实现复杂功能按钮;支持自定义文本样式、背景色及边框弧度等样式。示例代码展示了不同类型按钮的创建、子组件嵌套及点击事件处理方法。
132 18
|
3月前
|
数据安全/隐私保护
HarmonyOS NEXT - ArkUI: TextInput组件
TextInput组件是用于输入单行文本的核心组件,广泛应用于登录账号、密码输入及消息发送等场景。支持通过`placeholder`设置提示文字、`text`初始化文本内容以及`controller`控制输入行为。提供多种输入类型(如普通、密码、邮箱、数字)通过`.type()`方法设置,并可通过`.onChange()`监听文本变化。 示例代码展示了基本用法,包括账号、密码和手机号的输入框实现。此外,组件支持字符计数功能,通过`.maxLength()`限制最大字符数、`.showCounter()`显示计数器,并可自定义阈值和高亮边框效果,满足复杂输入场景需求。
143 15
|
3月前
HarmonyOS NEXT - ArkUI: Image组件
Image组件用于渲染和展示图片,丰富界面视觉效果。支持png、jpg、bmp、svg、gif和heif等多种格式,数据源包括本地资源、Resource资源、网络资源、媒体库(file://路径)及PixelMap像素图。使用时需根据资源类型配置路径或权限(如网络图片需声明ohos.permission.INTERNET)。此外,Image组件支持矢量图填充颜色设置(fillColor)和多种缩放模式(objectFit),如Contain、Cover等。示例代码展示了本地、资源、网络图片的加载与样式调整方法。
130 14