OpenHarmony UI动画-recyclerview_animators

简介

带有添加删除动画效果以及整体动画效果的list组件库

下载安装

ohpm install @ohos/recyclerview-animators

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

使用说明

  1. 引入组件库

    import { RecyclerView } from "@ohos/recyclerview-animators"

  2. 在代码中使用

    @State controller: RecyclerView.Controller = new RecyclerView.Controller()
    private listDatas = ["A","B","C"]

    aboutToAppear() {
    this.controller.setAdapterAnimation(RecyclerView.AdapterAnimationType.AlphaIn) // 设置列表整体效果类型
    this.controller.setFirstOnly(false) // 设置是否在item重复出现时显示动画效果
    this.controller.setDuration(500) // 设置动画时长
    }

    build() {
    Column() {
    RecyclerView({
    array: this.listDatas, // 数据源
    controller: this.controller, // 控制器
    child: (itemData) => {
    this.SpecificChild(itemData) // 子布局
    }
    })
    }
    }

    @Builder SpecificChild(itemData) {
    Column() {
    Image($r("app.media.chip"))
    .width('100%')
    .height(100)
    Text(itemData + '')
    .fontSize(20)
    .textAlign(TextAlign.Center)
    .width('100%')
    }.margin(10)
    }

接口说明

controller: RecyclerView.Controller = new RecyclerView.Controller()

  1. 设置列表整体效果类型 this.controller.setAdapterAnimation()
  2. 设置是否在item重复出现时显示动画效果 this.controller.setFirstOnly()
  3. 设置动画时长 this.controller.setDuration()

约束与限制

在下述版本验证通过:

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

目录结构

|---- recyclerview_animators  
|     |---- entry  # 示例代码文件夹
|     |---- library  # 库文件夹
|	    |----src
          |----main
              |----ets
                  |----components
                      |----adapterAnimator #动画效果适配
                      |----itemAnimator #元素动画效果实现
                      |----RecyclerView.ets #核心类
|           |---- Index.ets  # 对外接口
|     |---- README.md  # 安装使用方法                    

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ......

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ......

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ......

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题

2.性能优化方向

3.架构方向

4.鸿蒙开发系统底层方向

5.鸿蒙音视频开发方向

6.鸿蒙车载开发方向

7.鸿蒙南向开发方向

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
SoraLuna4 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
ClkLog-开源埋点用户分析5 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6685 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人6 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos