CN115640010B

CN115640010B - Flutter中无限循环滚动的列表组件

Info

Publication number: CN115640010B
Application number: CN202211659710.6A
Authority: CN
Inventors: 王璐; 樊晓旺; 彭泽峰; 张海庆
Original assignee: Beijing Ward Bochuang Information Technology Co ltd
Current assignee: Beijing Ward Bochuang Information Technology Co ltd
Priority date: 2022-12-23
Filing date: 2022-12-23
Publication date: 2023-04-18
Anticipated expiration: 2042-12-23
Also published as: CN115640010A

Abstract

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

Description

Flutter中无限循环滚动的列表组件

技术领域

本专利申请属于列表组件技术领域，更具体地说，是涉及一种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 定时任务对列表元素做自动滚动。

一种Flutter 中无限循环滚动的列表组件，该列表组件是利用了如上任一项所述的方法而封装构建的。

由于采用了上述技术方案，本发明取得的有益效果是：

本发明利用 Flutter 原有组件，另行编写一份组件，封装其代码，以供后续开发使用，减少开发时间，提高研发效率，便于推广应用。

通过对Flutter组件的封装，极大降低了相同功能编写重复代码的工作，用法简单，实用性强。

附图说明

图1为本发明的流程示意图；

图2为本发明的过程图一；

图3为本发明的过程图二。

具体实施方式

下面结合实施例对本发明做进一步详细说明。

本发明公开了Flutter中无限循环滚动的列表组件，本发明的思路是：通过聚合Flutter自带组件，封装成全新组件，利用 Timer 类做定时任务来处理自动滚动定时任务，代码量进行了完美的精炼。

首先介绍术语：

Flutter：滚动型控件，可滚动显示超出屏幕的内容，应用场景为显示超过一屏的内容。

关于Flutter，Flutter是一个移动应用程序的软件开发工具包（SDK），具有以下特征：

跨平台应用的框架，没有版使用权WebView或者系统平台自带的控件，使用自身的高性能渲染引擎自绘。

简化版的浏览器，最大限度在android和ios上统一UI，包括业务逻辑和用户体验。

开发语言使用dart，结合C, C++, 和Skia（2D渲染引擎）构建。

支持hot reload，包含着完整的控件和工具链。

一切皆控件，控件是每个Flutter应用程序的基本构建块，与分离视图、控制器、布局和其他属性的框架不同，Flutter具有一致的统一对象模型：控件。一个控件可以定义：结构元素（比如按钮或菜单）、风格元素（比如字体或颜色方案）、布局的方面（比如填充）、一些业务逻辑等。

组合大于继承，控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量。

强化版的WebView，框架仅提供一个View层，大部分功能要依赖原生。

本发明的过程是：

包括如下步骤：

S1、创建动画效果：创建列表元素消失、显示时的动画效果，并为动画效果配置所需参数。相关代码如下：

其中 _tween 为动画从开始到结束的值。

下面两个 SizeTransition 为每个元素显示、消失时的动画，该为 Flutter 原生组件，根据手机坐标，其中显示时 axisAlignment 为1.0，消失时为-1.0。

sizeFactor为控制 child 的动画效果。

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

此段代码为构建列表样式，其中itemBuilder为构建每一个item的回调函数，在这里把用户设置的组件展示出来。

其中 physics 设置为不允许用户滑动，因该组件为自动无限滚动的列表。

initialItemCount 该值为列表展示几个元素，用户自定义，如果传入的数值大于自定义的数值，则最大值为用户设置的值，否则值展示为用户传入数据的长度。

最后给该组件设置一个 key：_animatedListKey，用于找到该组件，插入、删除数据。

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

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

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

这一步主要是编写自动滚动的逻辑，代码如下：

利用 Timer 对象中的 periodic 定时任务来做自动滚动。

在这里设置时间为3秒触发一次，在3秒时间到的时候，会自动执行后面方法中的内容。

首先利用 Dart 中 List.removeAt 方法，来删除数据源中的第一个数据，并且获取到第一个数据的内容。

随后利用上一个步骤中的 key 来获取到当前组件，随后调用 removeItem 方法来删除列表UI的第一个数据，这个方法中还需要传入一个删除时的动画，用到第一个步骤的 SizeTransition，到这就完成删除第一条数据的目的。

最后在数据源最后一位加入我们刚才删除的数据，这样就完成了循环。

进一步，步骤S2中，删除动画或插入动画从开始到结束的执行时间为0.1-2s。

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

进一步，步骤S6中，具体为：利用 Dart 中 List.removeAt 方法，删除数据列表中第一条数据。

进一步，步骤S6中，每一个元素UI自动滚动的维持时间是3-6s，并利用定时器Timer 对象中的 periodic 定时任务对列表元素做自动滚动。

除此之外，本发明还公开了一种Flutter 中无限循环滚动的列表组件，该列表组件是利用了上述的方法而封装构建。

图1和图2展示了无限循环滚动列表的滚动状态，滚动方向从左至右为例，该列表展示七个元素UI，编号为1-7，每个元素UI都填充不同颜色的色块以区分。一开始是图1所示的编号1-7的顺序展示，随着滚动的开展，慢慢变成了7/8/1/2/3/4/5的顺序展示。在每一个元素UI显示、消失时，根据开始和结束执行动作，都有对应的过渡动画出现，不仅可以慢慢改变颜色，更可以顺势改变动作、形状、角度、幅度，甚至是比较大的动作变化，如完成一次360°旋转变换，使得场景切换更加顺畅、动感、炫酷或抓眼球。

本发明由于进行了组件封装，代码量骤减，对比如下：

使用了该组件的需求，只需写五行以内的代码即可实现。

未使用该组件，实现该需求需要多行代码：

上面的是列表容器的代码，下面的是定时器的代码。

。

通过对比可以知道，代码量骤降，对于程序代码开发是极大的利好。

Claims

1.Flutter 中无限循环滚动的列表组件的构建方法，其特征在于，包括如下步骤：

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

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

2.根据权利要求1所述的Flutter 中无限循环滚动的列表组件的构建方法，其特征在于，步骤S2中，删除动画或插入动画从开始到结束的执行时间为0.1-2s。

3.根据权利要求1所述的Flutter 中无限循环滚动的列表组件的构建方法，其特征在于，步骤S3中，获取用户传入的元素UI及数据列表后，记为一个组件，并给该组件设置一个标记 key，上述标记 key用于找到该组件、插入数据、删除数据。

4.根据权利要求1所述的Flutter 中无限循环滚动的列表组件的构建方法，其特征在于，步骤S6中，具体为：利用 Dart 中 List.removeAt 方法，删除数据列表中第一条数据。

5.根据权利要求3所述的Flutter 中无限循环滚动的列表组件的构建方法，其特征在于，步骤S6中，每一个元素UI自动滚动的维持时间是3-6s。

6.根据权利要求1所述的Flutter 中无限循环滚动的列表组件的构建方法，其特征在于，步骤S6中，利用定时器Timer 对象中的 periodic 定时任务对列表元素做自动滚动。