OpenHarmony三方库组件：RecyclerViewPager

最新推荐文章于 2024-07-09 20:42:41 发布
最新推荐文章于 2024-07-09 20:42:41 发布
阅读量721 收藏 22
点赞数 11
分类专栏： 鸿蒙 鸿蒙三方库 文章标签： harmonyos 华为 鸿蒙 深度学习 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/situnanQAQ/article/details/139969178
版权

简介

RecyclerViewPager是一个支持自定义左右翻页切换效果、上下翻页切换效果、类似Material风格的容器组件。

效果展示

下载安装

ohpm install @ohos/recyclerviewpager

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm包

使用说明

singleFlingPager的使用

  1. 导入
  import { singleFlingPager } from "@ohos/recyclerviewpager"
  1. 传入自定义布局
自定义方法specificParam中传入自己的自定义布局
@Builder specificParam(item) {

   if (item.i == this.index) {
     Flex() {
       Text("item=" + item.i).fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ left: this.marginLeft, right: this.marginRight })
     .width(this.Containderwidth)
     .height('90%')
     .backgroundColor("#273238")
     .scale({
       x: 1,
       y: this.offsetX < 0 ? 1 + this.offsetX / this.ScreenOffset : 1 - this.offsetX / this.ScreenOffset
     })
     .offset({x:'1%'})
   } else {
     Flex() {
       Text("item").fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ left: this.marginLeft, right: this.marginRight })
     .width(this.Containderwidth)
     .height('80%')
     .backgroundColor("#273238")
     .scale({
       x: 1,
       y: this.offsetX < 0 ? 1 - this.offsetX / this.ScreenOffset : 1 + this.offsetX / this.ScreenOffset
     })
     .offset({x:'1%'})
   }
 }
  1. 将布局传入容器内
   build() {
   Column() {
     Flex({ direction: FlexDirection.Column }) {
       singleFlingPager(
         {
           arr: this.arr,
           offsetX: $offsetX,
           index: $index,
           marginLeft: this.marginLeft,
           marginRight: this.marginRight,
           Containderwidth: this.Containderwidth,
           ContainderHeight: this.ContainderHeight,
           content: (item) => {
             this.specificParam(item)
           }
         }
       )
     }
   }
 }

verticalViewPager的使用

  1. 导入
  import { verticalViewPager } from "@ohos/recyclerviewpager"
  1. 传入自定义布局
自定义方法specificParam中传入自己的自定义布局
   @Builder specificParam(item) {

   if (item.i == this.index) {
     Flex() {
       Text("item=" + this.index).fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ top: this.topSpaced, bottom: this.topSpaced /*, left: this.topSpaced, right: this.topSpaced */
     })
     .width('100%')
     .height(this.ContainderHeight)
     .backgroundColor("#273238")
     .scale({
       x: this.offsetY < 0 ? 1 + this.offsetY / this.ScreenOffset : 1 - this.offsetY / this.ScreenOffset,
       y: 1
     })
   } else {
     Flex() {
       Text("item").fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ top: this.topSpaced, bottom: this.topSpaced, left: this.topSpaced, right: this.topSpaced })
     .width('90%')
     .height(this.ContainderHeight)
     .backgroundColor("#273238")
     .scale({
       x: this.offsetY < 0 ? 1 - this.offsetY / this.ScreenOffset : 1 + this.offsetY / this.ScreenOffset,
       y: 1
     })
   }

 }
  1. 将布局传入容器内
   build() {
   Column() {
     Flex() {
       verticalViewPager({
         arr: this.arr,
         offsetY: $offsetY,
         index: $index,
         marginTop: this.topSpaced,
         marginBottom: this.topSpaced,
         ContainderWidth: this.ContainderWidth,
         ContainderHeight: this.ContainderHeight,
         content: (item) => {
           this.specificParam(item)
         }
       })
     }
   }
 }

singleFlingPagerSelect的使用

  1. 导入
  import { singleFlingPagerSelect } from "@ohos/recyclerviewpager"
  1. 传入自定义布局
自定义方法specificParam中传入自己的自定义布局
@Builder specificParam(item) {

   if (item.i == this.index) {
     Flex() {
       Text("item=" + item.i).fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ left: this.marginLeft,right: this.marginRight })
     .width(this.Containderwidth)
     .height('90%')
     .backgroundColor("#273238")
     .scale({
       x: 1,
       y: this.offsetX < 0 ? 1 + this.offsetX / this.ScreenOffset : 1 - this.offsetX / this.ScreenOffset
     })
   } else {
     Flex() {
       Text("item").fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ left: this.marginLeft,right: this.marginRight })
     .width(this.Containderwidth)
     .height('80%')
     .backgroundColor("#273238")
     .scale({
       x: 1,
       y: this.offsetX < 0 ? 1 - this.offsetX / this.ScreenOffset : 1 + this.offsetX / this.ScreenOffset
     })
   }

 }
  1. 将布局传入容器内
   build() {
     Flex() {
       singleFlingPagerSelect({
         arr: this.arr,
         offsetX: $offsetX,
         index: $index,
         marginLeft: this.marginLeft,
         marginRight: this.marginRight,
         Containderwidth: this.Containderwidth,
         ContainderHeight: this.ContainderHeight,
         content: (item) => {
           this.specificParam(item)
         }
       })
     )}
   }

属性说明

singleFlingPager属性说明

arr: 页面文本内容,
offsetX: 页面滑动偏移,
index: 当前页面索引值,
marginLeft: 页面左边距,
marginRight: 页面右边距,
Containderwidth: 页面宽度
ContainderHeight: 页面高度
content: 容器内布局

verticalViewPager属性说明

arr: 页面文本内容,
offsetY: 页面滑动偏移,
index: 当前页面索引值,
marginTop: 页面顶边距,
marginBottomt: 页面下边距,
ContainderWidth: 页面宽度,
ContainderHeight: 页面高度,
content: 容器内布局

singleFlingPagerSelect属性说明

arr: 页面文本内容,
offsetX: 页面滑动偏移,
index: 当前页面索引值,
marginLeft: 页面左边距,
marginRight: 页面右边距,
Containderwidth: 页面宽度
ContainderHeight: 页面高度
content: 容器内布局

约束与限制

在下述版本验证通过：

  • DevEco Studio 版本： 4.1 Canary(4.1.3.317)
  • OpenHarmony SDK: API11 (4.1.0.36)

目录结构

|---- RecyclerViewPager 
|     |---- entry  # 示例代码文件夹
|     |---- library  # RecyclerViewPager库文件夹
|         |----src
|             |----main
|                     |----components
|                         |----materialContainderTop.ets #material风格实现
|                         |----verticalViewPager.ets #上下翻页效果实现
|         |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

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

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

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

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

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

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

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

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

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

总结

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

司徒南QAQ
关注
  • 11
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
KeyPointsAnd3DSC算法三方库
10-15
“A Fast Point Clouds Registration Algorithm for Laser Scanners”论文复现的KeyPointsAnd3DSC算法，可用来实现点云配准。参考博客链接：https://blog.csdn.net/weixin_43896283/article/details/133840198
C++三方库 PCL1.8.1
12-11
vs2015对应的PCL1.8.1，包括两个文件：PCL-1.8.1-AllInOne-msvc2015-win64.exe、pcl-1.8.1-pdb-msvc2015-win64.zip。
pyautoit-master三方库包
05-12
此包为pyautoit-master三方库的包，可以用来作为python操作Windows窗口的支持库。 使用方法： 1、下载此包，解压，到pyautoit-master目录下打开cmd窗口，离线安装，指令：python setup.py install 2、python调用，...
yaml-cpp三方库源码，版本为0.8.0
04-13
yaml-cpp 是一个功能强大的 C++ 库，用于处理 YAML 数据格式。其源码结构清晰，模块划分合理，易于理解和扩展。库内提供了丰富的 API，包括节点的创建、查询、修改以及文件的读写等，使得开发者能够方便地在 C++ 中...
01 EML_三方组件各级扁平化_
09-30
三方组件的使用可以快速实现这些功能，比如，可能会有专门的库用于实时数据采集、数据分析、报警系统等。扁平化的组件设计可以使各个部分更好地协同工作，降低集成难度，提高系统的整体性能。 文件名"01 EML"可能指...
鸿蒙语言基础类库：【@ohos.util.ArrayList (线性容器ArrayList)】
最新发布
2301_76813281的博客
07-09 491
本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。点击或者复制转到。ArrayList是一种线性数据结构，底层基于数组实现。ArrayList会根据实际需要动态调整容量，每次扩容增加50%。ArrayList和[Vector]相似，都是基于数组实现。它们都可以动态调整容量，但Vector每次扩容增加1倍。ArrayList和[LinkedList]相比，ArrayList的随机访问效率更高。
鸿蒙NEXT
2301_81771576的博客
06-29 1825
据了解，除了已经公开亮相华为开发者大会的腾讯视频、腾讯新闻、QQ 浏览器、搜狗输入法、腾讯自选股、QQ音乐、酷狗音乐、酷我音乐、全民K歌、懒人听书、起点读书外，腾讯旗下多款产品已在进行鸿蒙系统的开发适配工作，希望尽快保障用户平滑、安全、稳定地过渡到新系统。其次就是，鸿蒙NEXT针对一些基础、高频、创新的场景， 通过 API、控件等方式向第三方应用开放如实时朗读、智能荐图、自动填写、图文翻译、OCR 服务识别推荐、主体抠图、人脸检测、卡证识别等能力，和开发者共同打造生态级的鸿蒙原生智能。
加入运动健康数据开放平台，共赢鸿蒙未来
HarmonyOS SDK闭源开放能力技术团队
07-05 983
优质应用服务联合三方设备，结合运动健康服务提供的运动健康数据服务，共同打造"智能运动健康设备+华为终端+应用服务"生态，为用户带来安全、智慧、便捷的运动健康体验。华为运动健康开放平台提供了多种形式的开放能力，支持应用生态开放能力和设备接入开放能力。提供丰富的运动健康类的API，支持多种运动类型和健康数据的应用开发准备，如步数、心率等。
HarmonyOS APP应用开发项目- MCA助手（Day02持续更新中~）
Varin
06-30 894
鸿蒙APP开发是指在华为的HarmonyOS平台上构建应用程序的过程，它利用华为提供的DevEco Studio集成开发环境（IDE）以及一套丰富的API库，支持Java、JavaScript等语言，采用组件化和模块化设计原则。开发者可以通过创建Ability和Particle组件，构建具有分布式能力的应用，实现一次开发，多端部署的目标，让应用能够在手机、平板、穿戴设备、智能家电等不同设备之间无缝流转，提供统一的用户体验和强大的跨设备协同能力。鸿蒙APP开发旨在简化开发流程，降低开发成本，同时增强应用的安全
鸿蒙语言基础类库：【@ohos.util (util工具函数)】
2301_76813281的博客
07-09 646
本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。点击或者复制转到。该模块主要提供常用的工具函数，实现字符串编解码（TextEncoder，TextDecoder）、有理数运算（RationalNumber）、缓冲区管理（LruBuffer）、范围判断（Scope）、Base64编解码（Base64）、内置对象类型检查（Types）等功能。
【HarmonyOS NEXT】鸿蒙线程安全容器集collections.Array
wu1004019946的博客
07-08 1141
从ArkTS Array中移除并返回最后一个元素。对Array中的每个元素执行提供的回调函数，并返回一个新的Array，该Array包含回调函数的结果。返回Array中第一个满足指定测试函数的元素的值，如果所有元素都不满足，则返回undefined。返回一个新的ConcatArray，该ConcatArray是原始ConcatArray的切片。返回Array中第一个满足指定测试函数的元素的索引，如果所有元素都不满足，则返回-1。返回一个新的Array，该Array是原始ArkTS Array的切片。
【鸿蒙学习笔记】使用动画
张紫娃的博客
07-09 275
/ 第一步：使用@AnimatableExtend装饰器，自定义可动画属性接口@Entry@Componentbuild() {Row() {Text("点击我").backgroundColor(Color.Pink).width(300).height(140).textAlign(TextAlign.Center)30 : 20;})
HarmonyOS应用开发前景及使用工具
Crowd_chips的博客
07-07 324
学习之前，需要有一定的开发基础（如：java、c#、c++、WEB前端的一些了解)。HarmonyOS开发使用的ArkTS，ArkTS是在TS的基础之上进行封装的，而TS是由JS进行封装起来的，因此需要先熟悉thml,CSS,JS等相关知识。
HarmonyOS Next系列之Echarts图表组件（折线图、柱状图、饼图等)实现（八）
pixle的博客
07-03 892
HarmonyOS Next（基于API11）实现Echarts图表组件（折线图、柱状图、饼图等)。
HarmonyOS - 通过.p7b文件获取fingerprint
XuZhenhao
07-04 460
开发者证书指纹获取方式 1.证书存放.p7b文件的development-certificate字段下，将证书的内容拷贝存储为test.cer文件。 2. 利用keytool工具打印对应的证书的指纹 keytool -printcert -file test.cer 去掉冒号
鸿蒙开发HarmonyOS NEXT （三） 熟悉ArkTs （上）
m0_61472704的博客
07-04 611
鸿蒙专栏地址：https://blog.csdn.net/m0_61472704/category_12711032.html
HarmonyOS鸿蒙开发入门 , ArkTS语言的了解
WDJ54068923的博客
07-09 830
鸿蒙（即HarmonyOS，开发代号Ark，正式名称为华为终端鸿蒙智能设备操作系统软件）是由华为公司2012年以来开发的分布式操作系统，并于2019年8月正式发布。该系统利用“分布式”技术，将手机、电脑、平板、电视、汽车和智能穿戴等多款设备融合成一个“超级终端”，使用户便于操作和共享各种设备的资源。通过这篇博客，我会记录我在学习HarmonyOS语法遇到的重点和难点。
玩转HarmonyOS NEXT之配置文件篇
断线的风筝
07-02 937
本文以Stage模型为例，详细介绍了应用的各种配置文件，这些配置文件会向编译工具、操作系统和应用市场提供应用的基本信息。在基于Stage模型开发的应用项目代码下，都存在一个app.json5的配置文件、以及一个或者多个配置文件。
我使用HarmonyOs Next开发了b站的首页
制定持续可量化的目标，不断坚持。
07-06 374
使用HarmonyOs 完成 b站首页的推荐频道
使用python内置库或三方库实现：输出列表内所有指定元素的索引值
03-25
可以使用列表的一个内置函数 index() 来获取某个元素的索引值。例如，下面的代码可以输出列表 lst 中所有元素为 'a' 的索引值： lst = ['a', 'b', 'c', 'a', 'd', 'e', 'a'] target = 'a' indices = [i for i, x in...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值