Flutter

Flutter PageView使用案例

2019-02-27  本文已影响29人  黑键手记

前言

现在的小目标是要实现一个 「图片轮播」的效果,我们在 Android 中可以使用ViewPager结合handler或者 Timer去实现。

而我们在 Flutter中,其实也是类似的。
那么,在Flutter中,代替 Android 中的ViewPager组件是PageView,而且,这个PageView相比ViewPager扩展性更高。

我们来看一下

Flutter PageView 官网

根据官网的介绍,PageView 在需要展示的页面很多时,有「控件复用」功能,而且,我们还可以通过

    this.scrollDirection = Axis.horizontal  | Axis.vertical

来设置滚动的方向,也就是说,我们还可以完成「纵向滚动」,真的很棒有么有?

那我们来使用一下pageview

一、准备数据


偷的小米官网的轮播图

二、准备一个PageController

三、准备一个很普通的PageView ,仔细看看哦

四、交给身体


看一下效果图


用到了FadeInImage.assetNetwork这个可以提供占位图的Image,使用也很简单,大家可以用一下

onPageChanged 通过这个属性,我们能够监听当前滑动到的页码,从而做出相应的处理

如果想对当中的一页进行点击,那么给 itemBuilder: 返回的控件包裹上

GestureDetector,或者直接返回一个button类型的Widget即可

ok,了解了这个PageView,接下来,我们想法子搞一个「轮播效果」,请见下一篇文章。

上一篇下一篇

猜你喜欢

热点阅读