美文网首页Flutter
Flutter 实现 「图片轮播」效果

Flutter 实现 「图片轮播」效果

作者: 黑键手记 | 来源:发表于2019-03-04 18:39 被阅读21次

拖了好几天,终于要实现 「图片轮播」效果了,是不是很激动。

前几天专门学习的 TimerPageView 还有没有印象呢?如果没有的话,可以再回去看看哦。

我们先来看下效果动图

就是在 之前PageView的基础上,添加了自动轮播效果。
那么,废话少说,开始吧。

一、准备数据源

很简单,准备5张图片,同样从小米官网偷

注意到没有,除了声明了 5 张图片之外,还单独提供了一个 realImgs的列表。他的作用很关键,决定了用户的体验哦。

这样做的目的是,「欺骗视觉」
在第一个位置增加 「real 最后一张图片」; 在最后的位置增加「real 第一张图片」,让「real 图片长度」 变成了 「real 图片长度 + 2。
这样,只需在滑动 pageview 的时候,当滑到「real 数组最后一张」的时候,强制显示「扩容数组的第一个元素」;
当手动滑动到「real 数组第一张」的时候,强制显示「扩容数组的最后的元素」。
这样一来,「循环轮播」的效果就出来了。

二、准备单个页面布局

很简单,直接贴代码了,注意,我特意用 Text 标识出真实的 图片的索引,好明白「循环轮播」的原理

三、定义循环的 Timer

先不用看注释,如果有疑惑,再看注释

四、准备 PageView 中的必要的属性

子控件 滑动效果 控制器 页面切换监听 滚动方向

然后因为还需要滚动监监听,所以需要再准备通知

通知

最后,把我们创建的 PageView 用 NotificationListener 包裹起来即可,像这样

    //创建类viewpager
    Widget Pager(constraints, callback) {
              return new NotificationListener(
                      child: new PageView.custom(....

五、这样,在 开始的 initState 中的 Timer 的推动下,PageView 就会开始循环轮播,然后在 PageView 的 页面监听的驱动以及通知的共同作用下,营造出像是在 ‘无限轮播’ 的假象。

Bingo!总结一下。

Timer
PageView
PageController
NotificationListener
PageScrollPhysics

相关文章

  • Flutter 实现 「图片轮播」效果

    拖了好几天,终于要实现 「图片轮播」效果了,是不是很激动。 前几天专门学习的 Timer、PageView 还有没...

  • JQ实现左右轮播效果

    这篇文章主要是实现图片左右轮播效果,功能:进入页面自动播放图片,鼠标悬浮,暂停图片轮播,鼠标离开,继续图片轮播,点...

  • 27.jquery 实战-轮播

    代码 1.实现如下轮播效果 要求:渐变轮播,图片淡入淡出轮播会自动循环像左向右点击会展示前/后图片底部显示轮播当前...

  • 【axure】axure制作图片轮播效果

    网站或APP中经常看到图片轮播(即自动切换)效果,今天就总结一下如何用axure实现图片轮播以及点击切换效果。先睹...

  • UIScrollView实现切换图片,图片间有间距

    效果图: 默认情况下通过UIScrollView实现图片轮播。图片间是无缝连接的。 要想实现iOS相册中的间距效果...

  • RN-第三方之react-native-image-zoom-v

    本文内容多张图片放大后轮播、捏合效果单张图片放大捏合效果 多张图片放大后轮播、捏合效果 单张图片放大捏合效果

  • flutter实现轮播图效果

    更多文章请查看 lutter从入门 到精通 1 添加依赖库 2 普通常用 圆点指示器自动轮播图 3 自定圆点分页指...

  • Flutter学习六之实现一个带筛选的列表页面

    上期实现了一个网络轮播图的效果,自定义了一个轮播图组件,继承自StatefulWidget,我们知道Flutter...

  • 轮播图—纯js(javascript)实现:

    纯js实现: 要求:算了,还是先看图吧 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击左右按钮实现切换点击...

  • 在简书中如何引用代码

    算啦,先看图 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击左右按钮实现切换点击下标焦点实现切换1、首先实...

网友评论

    本文标题:Flutter 实现 「图片轮播」效果

    本文链接:https://www.haomeiwen.com/subject/glniuqtx.html