【Flutter 问题系列第 18 篇】如何在 Flutter 中实现列表消息的滚动效果

这是【Flutter 问题系列第 18 篇】，如果觉得有用的话，欢迎关注专栏。

一：创作初衷

这不马上要五一了，虽然咱目前还没有抢到票吧，但看到快速抢票中有一个效果图是这样的，如下所示

就想着如果用 FLutter 实现列表消息的滚动效果，该怎么做呢 ？

二：思路

我们知道在 Flutter 的第三方库 pub 有一个很多人在使用的轮播图插件 flutter_swiper，虽然是轮播图插件，但并不是只有图片才可以有用，因为它的 itemBuilder 属性返回的类型是 Widget。

既然返回类型是 Widget，那就好办了，我们把要显示的内容修改一下样式，然后直接放在它的 itemBuilder 属性里不就行了？（Allen Su 这孩子打小就聪明，哈哈哈）

为方便大家简单了解 flutter_swiper ，我把这个库的 中文说明 已经贴出来了，不谢哦。

三：代码实现

因为是演示，不完全实现上图的全部内容，只简单实现下列表消息的滚动效果，思路有了，一切都好说了。

下面是主要代码

Swiper(
  itemCount: l.length, // 对象个数
  loop: true, // 允许循环播放
  autoplay: true, // 允许自动播放
  scrollDirection: Axis.vertical, // 滚动方向设置为水平
  duration: 2000, // 执行时长
  itemBuilder: (BuildContext context, int index) {
    return Text(
      l[index],
      style: TextStyle(fontSize: 15, color: Colors.black),
    );
  },
)

最终的简易演示效果如下图所示

请看友自动忽略外观，功能实现了就行。

数据中数组 l 原数据如下，不想自己再定义数据的，直接拿走用即可。

List l = [
    "23:58:56  ●  多选车次、座席可大幅提升抢票成功率~",
    "23:58:57  ●  如果觉得博文不错，记得关注一下哦",
    "23:58:58  ●  快速服务器--抢票中",
    "23:59:00  ●  感谢CSDN官方提供平台",
    "23:59:01  ●  短途线路放票量小，跨站方案成功率更高~",
    "23:59:04  ●  快速服务器--抢票中",
  ];

写这篇博客时用到的 Flutter 版本是 2.0.2，flutter_swiper 插件的版本是 1.1.6。

ok，关于如何在 Flutter 中实现列表消息的滚动效果，就简单介绍到这里，如果觉得不错，欢迎三连哦。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2021年4月26日 GitHub 标星已达 90K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。