[发明专利]Flutter中无限循环滚动的列表组件

说明书

本发明涉及Flutter中无限循环滚动的列表组件，包括如下步骤：创建动画效果；编写列表容器；获取用户传入的元素UI及数据列表；数据判断；显示用户传入的元素UI及数据列表；编写自动滚动、插入动画的任务。本发明通过对Flutter组件的封装，同时利用Timer类做定时任务来处理自动滚动定时任务，极大降低了相同功能编写重复代码的工作，代码数据量少，用法简单，实用性强。

技术领域

本专利申请属于列表组件技术领域，更具体地说，是涉及一种Flutter 中无限循环滚动的列表组件。

背景技术

Flutter是Google一个新的用于构建跨平台的手机App的软件开发工具包SDK。写一份代码，在Android 和iOS平台上都可以运行。Flutter使用Dart语言开发，结合C, C++,和Skia（2D渲染引擎）构建支持hot reload，包含着完整的控件和工具链。

Dart可以被编译(AOT)成不同平台的本地代码，让Flutter可以直接和平台通讯而不需要一个中间的桥接过程，从而提高了性能。

在 Flutter 移动端应用（Android、iOS）开发中，通常会有无限循环滚动列表的需求。所谓无限循环滚动列表，是指将列表做成无限循环滚动，即第一个element滚出边界之后需要自动跳到队尾，参与下一轮滚动，达到无限滚动的效果。目前在 Flutter 移动端应用中还没有开发出上述无限循环滚动列表，或者即便是有类似的滚动列表，但由于没有进行代码封装，使得后续开发无法使用，无形中延长开发的时间，因此需要进行该方面的针对性研发。

发明内容

本发明需要解决的技术问题是提供Flutter 中无限循环滚动的列表组件，该方法利用 Flutter 原有组件，另行编写一份组件，封装其代码，可供后续开发使用，减少开发时间。

为了解决上述问题，本发明所采用的技术方案是：

Flutter 中无限循环滚动的列表组件，包括如下步骤：包括如下步骤：

S1、创建动画效果：创建列表元素消失、显示时的动画效果，并为动画效果配置所需参数；

S2、编写列表容器：构建列表样式，该列表容器中可展示多个元素UI，在元素UI发生变化时加入步骤S1中的动画效果；

S3、获取用户传入的元素UI及数据列表；

S4、判断数据列表的长度是否大于用户想显示元素UI的最大值k，若是，数据列表的长度=k；否则，数据列表的长度为用户实际传入数据列表的长度；

S5、显示用户传入的元素UI及数据列表；

S6、编写自动滚动、插入动画的任务：在用户传入的元素UI及数据列表显示后，删除数据列表中元素UI中的第一条数据，做删除动画，并把删除的第一条数据插入到数据列表中元素UI的最后一条中，做插入动画；于此同时，利用定时任务对元素UI做自动滚动，使元素UI实现无限循环滚动的效果，完成不断循环。

本发明技术方案的进一步改进在于：步骤S2中，删除动画或插入动画从开始到结束的执行时间为0.1-2s。

本发明技术方案的进一步改进在于：步骤S3中，获取用户传入的元素UI及数据列表后，记为一个组件，并给该组件设置一个标记 key，上述标记 key用于找到该组件、插入数据、删除数据。

本发明技术方案的进一步改进在于：步骤S6中，具体为：利用 Dart 中List.removeAt 方法，删除数据列表中第一条数据。

本发明技术方案的进一步改进在于：步骤S6中，每一个元素UI自动滚动的维持时间是3-6s。

本发明技术方案的进一步改进在于：步骤S6中，利用定时器Timer 对象中的periodic 定时任务对列表元素做自动滚动。