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  # 安装使用方法                    
```### 写在最后

**如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙**:
*   点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
*   关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
*   **想要获取更多完整鸿蒙最新学习资源,请移步前往小编:[`gitee.com/MNxiaona/733GH`](https://gitee.com/MNxiaona/733GH)**

![](https://i-blog.csdnimg.cn/direct/e9e45b82da9441889c6c17e0791831bc.jpeg#pic_center)
相关推荐
千鼎数字孪生-可视化3 小时前
3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。
ui·3d·信息可视化·数据分析
跟着珅聪学java6 小时前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
Alger_Hamlet20 小时前
Photoshop 2025 Mac中文 Ps图像编辑软件
macos·ui·photoshop
huoyingcg1 天前
3D Mapping秀制作:沉浸式光影盛宴 3D mapping show
科技·3d·动画·虚拟现实
余多多_zZ2 天前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统
长流小哥2 天前
可视化开发:用Qt实现Excel级动态柱状图
开发语言·c++·qt·ui
~央千澈~2 天前
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
鸿蒙开发
Industio_触觉智能3 天前
鸿蒙北向开发OpenHarmony5.0 DevEco Studio开发工具安装与配置
harmonyos·鸿蒙系统·openharmony·开源鸿蒙·鸿蒙开发·嵌入式开发板
Invisible_He3 天前
iOS自定义collection view的page size(width/height)分页效果
ui·ios·swift·collection
草巾冒小子3 天前
element-ui图片查看器
前端·vue.js·ui