Flutter PageView使用案例
2019-02-27 本文已影响29人
黑键手记
前言
现在的小目标是要实现一个 「图片轮播」的效果,我们在 Android 中可以使用ViewPager
结合handler
或者 Timer
去实现。
而我们在 Flutter
中,其实也是类似的。
那么,在Flutter
中,代替 Android 中的ViewPager
组件是PageView
,而且,这个PageView
相比ViewPager
扩展性更高。
我们来看一下
根据官网的介绍,PageView
在需要展示的页面很多时,有「控件复用」功能,而且,我们还可以通过
this.scrollDirection = Axis.horizontal | Axis.vertical
来设置滚动的方向,也就是说,我们还可以完成「纵向滚动」,真的很棒有么有?
那我们来使用一下
pageview
一、准备数据
偷的小米官网的轮播图
二、准备一个PageController
三、准备一个很普通的PageView
,仔细看看哦
四、交给身体
看一下效果图
用到了FadeInImage.assetNetwork
这个可以提供占位图的Image
,使用也很简单,大家可以用一下
onPageChanged
通过这个属性,我们能够监听当前滑动到的页码,从而做出相应的处理
如果想对当中的一页进行点击,那么给 itemBuilder:
返回的控件包裹上
GestureDetector
,或者直接返回一个button
类型的Widget
即可
ok,了解了这个PageView,接下来,我们想法子搞一个「轮播效果」,请见下一篇文章。